I'd like to extract the URL params inside a Redux middleware in order to dispatch an action and use those values in the payload.
-
Did you have any joy with what I suggested?U r s u s– U r s u s2016-07-01 11:18:21 +00:00Commented Jul 1, 2016 at 11:18
-
Thanks for your suggestion but I'm looking for exactly what I asked. If thats not possible then I'll need to find another way. I'm waiting for a little longer and if it's 100% that we can not extract params from the URL then I'll accept your answer.haxpanel– haxpanel2016-07-01 11:20:04 +00:00Commented Jul 1, 2016 at 11:20
-
I don't think extracting "the URL params inside a Redux middleware" makes sense. Can you point me to the documentation where you've seen anything like that?U r s u s– U r s u s2016-07-01 11:22:17 +00:00Commented Jul 1, 2016 at 11:22
-
I can not point it.haxpanel– haxpanel2016-07-01 11:26:25 +00:00Commented Jul 1, 2016 at 11:26
-
Is there any way to map the route params to state?haxpanel– haxpanel2016-07-01 11:27:22 +00:00Commented Jul 1, 2016 at 11:27
|
Show 3 more comments
2 Answers
In order to achieve your goal , you can use redux-router
This library allows you to keep your router state inside your Redux store. So getting the current pathname, query, and params is as easy as selecting any other part of your application state.
after that you can get your params from middleware
export const someMiddleware = store => next => action=> {
/// get params
let params = store.getState().router.params;
///then do what you want...........
next(action)
};
1 Comment
haxpanel
Thanks, I also ended up looking at redux-router as the closest answer for this. Fortunately, the exact solution for my problem (here: stackoverflow.com/questions/38145321/…) did not require me to change to this router.
You don't need to access params inside the middleware. A common pattern is just to access params via props in the component from where you want to dispatch the action.
Something like this:
this.props.dispatch(yourAction(this.props.params));
Note that you need to make dispatch available to your component by using react-redux Connect method. For example:
export default connect()(YourComponent);
