同时使用react-router和redux，打开不同url时，关于store中state的问题

Question

1. 项目中同时使用了react-router+redux，由于store是全局单例的，当在A模块页面设置了一些筛选项时，store中的state保存了状态，切换到B模块页面时，会将之前设置的筛选项直接带过去。

2. 有的场景下，带过去是合适的。但是有的场景下，却希望没有筛选项，使用state中的initialState感觉更为合适。

3. 我的具体场景是列表数据筛选。在A列表中输入了一些关键字进行筛选后（比如时间、游戏名称），切换到另一个页面的B列表时，时间和游戏名称都带过去了，然而B列表是另一个场景的列表了，感觉这时候时间和游戏名称使用默认设置比较好。

4. 问题：主要想问问大家有没有遇到类似的场景，都是怎么处理的？既做到用户体验比较好，同时代码又比较优雅呢？

Answer 1

在每个功能页面单独维护自己的筛选条件，可以用 state，或者我会极端点直接在声明一个 this.queryParams，用来存储初始条件，筛选的 onChange handler 中每次把新得到的条件 merge 到this.queryParams，然后根据最新的 queryParams 触发 Action 请求数据，数据回来之后会触发 render() ，会把最新的 queryString 更新到你的筛选条件上，再进一步，如果想在 url 上保持筛选条件，可以在触发 action 之前用 dispatch(push(path)) 来做一个 url queryString 的同步。

Answer 2

个人感觉解决这类问题的方法大概几种思路，具体还是要看需求和实际情况，欢迎讨论。

考虑 store 结构的设计。希望共享的数据还是这样的结构，反之是不是可以把 store 拆开来？比如 a 和 b 列表的筛选器能不能分开来储存？这样会导致 action，reducer，selector 都变得需要带上 key 复杂一些了，但好处是这样页面切换到时候状态还可以是暂留的，从 b 回到 a 的时候 a还可以依然是以前的状态。

简单点可以考虑增加一个 reset 的 action，在某些条件下重置这些 store，比如 component 的那几个生命周期？感觉你应该是用了 react-router-redux，考虑下它的 LOCATION_CHANGE ？