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

好吧，我最终在redux的github页面上找到了答案，所以我将在这里发布.希望它能帮别人省go 一些痛苦.

@我认为这个问题有两个方面.首先，componentWillReceiveProps()并不是响应状态变化的理想方式——主要是因为它迫使您必须进行必要的思考，而不是像Redux那样进行react .解决方案是将当前路由信息(位置、参数、查询)存储在存储区内.然后，您的所有状态都在同一个位置，您可以使用与其他数据相同的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 select={state => ({ filter: getFilters(store.router.params) })} />

问题的第二部分是，您需要一种方法来对视图层之外的重排状态更改做出react ，例如，对路由更改触发一个操作.如果您愿意，您可以继续在您描述的简单 case 中使用componentWillReceiveProps.

不过，对于任何更复杂的问题，如果你愿意的话，我建议你使用RxJS.这正是可观测数据的设计目的——react 式数据流.

要在Redux中实现这一点，首先创建一个可观察的存储状态序列.您可以使用rx的ObservaleFromStore()实现这一点.

EDIT AS SUGGESTED BY 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())的相同功能要简单得多.