我在我最新的应用程序中使用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有。
@H_
404_12@
好吧，我最终找到一个对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()这样的命令式模式的同样的功能简单得多。
