小编典典

在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。


阅读 340

收藏
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