reactjs – 响应React路由器中的路由转换,触发Redux操作

我在我最新的应用程序中使用react-router和redux，我面临一些问题与基于当前url参数和查询所需的状态更改。

基本上我有一个组件，需要更新它的状态每次url更改。状态是通过道具通过redux通过装饰器这样

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

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

componentWillReceiveProps(nextProps) {
    if (this.state.shouldupdate) {
      let { slug } = nextProps.params;
      let { citizenships,discipline,workright,location } = nextProps.query;
      const params = { slug,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);
    }
  }

是否有一个标准的方法来触发基于路由转换的操作？或者我可以将存储的状态直接连接到组件的状态，而不是通过props传递它？我试图使用willTransitionTo静态方法，但我没有访问的this.props.dispatch有。

好吧，我最终找到一个对redux的github页面的答案，所以会发布在这里。希望它节省一些人的痛苦。

@deowk这个问题有两个部分，我会说。第一个是componentWillReceiveProps()不是一个理想的方式来响应状态的变化 – 主要是因为它强迫你去强制性思考，而不是像我们做Redux的反应。解决方案是将您当前的路由器信息(位置，参数，查询)存储在您的商店内。然后所有的状态都在同一个地方，你可以使用与其余的数据相同的Redux API订阅它。

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

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

现在您的商店状态将始终与路由器状态同步。这修复了在上面的组件中手动响应查询参数更改和setState()的需要 – 只需使用Redux的连接器。

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

然后，只是使用observable运算符来订阅特定的状态更改。以下是成功登录后从登录页面重定向的示例：

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()这样的命令式模式的同样的功能简单得多。

reactjs – 响应React路由器中的路由转换,触发Redux操作

相关推荐