小编deo*_*owk的帖子

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

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

基本上我有一个组件,每次url更改时都需要更新它的状态.正在通过redux通过道具传递状态,装饰器就像这样

 @connect(state => ({
   campaigngroups: state.jobresults.campaigngroups,
   error: state.jobresults.error,
   loading: state.jobresults.loading
 }))
Run Code Online (Sandbox Code Playgroud)

目前我正在使用componentWillReceiveProps生命周期方法来响应来自react-router的url更改,因为当url在this.props.params和this.props.query中更改时,react-router会将新的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);
    }
  }
Run Code Online (Sandbox Code Playgroud)

是否存在基于路由转换触发操作的标准方法或者我可以将存储的状态直接连接到组件的状态而不是通过props传递它吗?我曾尝试使用willTransitionTo静态方法,但我无法访问this.props.dispatch.

reactjs react-router redux

53
推荐指数
2
解决办法
2万
查看次数

标签 统计

react-router ×1

reactjs ×1

redux ×1