在React Router中触发Redux操作以响应路由转换

小编典典

在React Router中触发Redux操作以响应路由转换

reactjs

我在最新的应用程序中使用react-router和redux，并且遇到了一些与基于当前url参数和查询所要求的状态更改有关的问题。

基本上，我有一个组件，每次URL更改时都需要更新其状态。像这样通过装饰器通过redux通过props传递状态

 @connect(state => ({
   campaigngroups: state.jobresults.campaigngroups,
   error: state.jobresults.error,
   loading: state.jobresults.loading
 }))

目前，我正在使用componentWillReceiveProps生命周期方法来响应来自react-
router的url更改，因为当this.props.params和this.props.query中的url更改时，react-
router会将新的props传递给处理程序。这种方法的主要问题是，我正在此方法中触发操作以更新状态-
然后，该状态通过并传递新的props该组件将再次触发相同的生命周期方法-因此基本上创建了一个无穷循环，目前我正在设置一个状态变量以阻止这种情况的发生。

  componentWillReceiveProps(nextProps) {
    if (this.state.shouldupdate) {
      let { slug } = nextProps.params;
      let { citizenships, discipline, workright, location } = nextProps.query;
      const params = { slug, discipline, workright, location };
      let filters = this._getFilters(params);
      // set the state accroding to the filters in the url
      this._setState(params);
      // trigger the action to refill the stores
      this.actions.loadCampaignGroups(filters);
    }
  }

是否有基于路线转换来触发动作的标准方法，还是可以将商店的状态直接连接到组件的状态，而不是通过prop传递它？我尝试使用willTransitionTo静态方法，但无法访问this.props.dispatch。

阅读 341

2020-07-22

共1个答案

小编典典

好吧，我最终在redux的github页面上找到了答案，因此将其发布在这里。希望它可以减轻别人的痛苦。

@deowk我想说，这个问题有两个部分。首先是componentWillReceiveProps（）并不是一种响应状态变化的理想方法-
主要是因为它迫使您进行命令式思考，而不是像我们对Redux那样进行被动式思考。解决方案是将当前的路由器信息（位置，参数，查询）存储在商店中。然后，您所有的状态都在同一个地方，您可以使用与其余数据相同的Redux
API对其进行订阅。

诀窍是创建一个在路由器位置更改时将触发的操作类型。在即将推出的React Router 1.0版本中，这很容易：

// routeLocationDidUpdate() is an action creator
// Only call it from here, nowhere else
BrowserHistory.listen(location => dispatch(routeLocationDidUpdate(location)));

现在，您的存储状态将始终与路由器状态同步。这就解决了手动响应查询参数更改和上面组件中的setState（）的需求-只需使用Redux的Connector。

<Connector select={state => ({ filter: getFilters(store.router.params) })} />

问题的第二部分是您需要一种对视图层之外的Redux状态更改做出反应的方法，例如响应路径更改而触发操作。如果愿意，您可以继续使用componentWillReceiveProps处理简单情况，例如您描述的情况。

不过，对于更复杂的事情，我建议您使用RxJS（如果您愿意的话）。这正是可观察对象的设计目标-反应性数据流。

要在Redux中执行此操作，请首先创建一个可观察的存储状态序列。您可以使用rx的observableFromStore（）执行此操作。

CNP建议的编辑

import { Observable } from 'rx'

function observableFromStore(store) {
  return Observable.create(observer =>
    store.subscribe(() => observer.onNext(store.getState()))
  )
}

然后，只需使用可观察的运算符来订阅特定的状态更改即可。这是成功登录后从登录页面重定向的示例：

const didLogin$ = state$
  .distinctUntilChanged(state => !state.loggedIn && state.router.path === '/login')
  .filter(state => state.loggedIn && state.router.path === '/login');

didLogin$.subscribe({
   router.transitionTo('/success');
});

此实现比使用命令式模式（例如componentDidReceiveProps（））的相同功能要简单得多。

2020-07-22