Get url params inside a Redux middleware using React-router

Question

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.

Seger

Did you have any joy with what I suggested? – Sibert

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. – Seger

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? – Sibert

I can not point it. – Seger

Is there any way to map the route params to state? – Seger

Map, as in using array.map? – Sibert

Not exactly .. There is a "location" key in the state object which is used by multiple components as data source. In the URL (very similar to google maps) I have a parameter called "location" which is a coordinate. My goal is to map that value (with some modification) to the state's "location" key. – Seger

#38145821 – Seger

Answer 1

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)
};

MORE INFO

Arbitrary

Thanks, I also ended up looking at redux-router as the closest answer for this. Fortunately, the exact solution for my problem (here: #38145821) did not require me to change to this router. – Seger

Answer 2

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);

Sibert