使用React-router在Redux中间件中获取url params

时间:2022-12-28 11:03:30

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.

我想在Redux中间件中提取URL参数,以便分派操作并在有效负载中使用这些值。

2 个解决方案

#1


2  

In order to achieve your goal , you can use redux-router

为了实现您的目标,您可以使用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.

此库允许您将路由器状态保留在Redux存储中。因此,获取当前路径名,查询和参数就像选择应用程序状态的任何其他部分一样简单。

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

更多信息

#2


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.

您不需要访问中间件内的params。一种常见的模式只是通过组件中的props来访问params,您可以从中派遣动作。

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:

请注意,您需要使用react-redux Connect方法为组件提供调度。例如:

export default connect()(YourComponent);

#1


2  

In order to achieve your goal , you can use redux-router

为了实现您的目标,您可以使用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.

此库允许您将路由器状态保留在Redux存储中。因此,获取当前路径名,查询和参数就像选择应用程序状态的任何其他部分一样简单。

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

更多信息

#2


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.

您不需要访问中间件内的params。一种常见的模式只是通过组件中的props来访问params,您可以从中派遣动作。

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:

请注意,您需要使用react-redux Connect方法为组件提供调度。例如:

export default connect()(YourComponent);