React Redux 配合 React Router 的异步 action 问题
broadliyn · 2016-08-22 16:38:09 +08:00 · 1430 次点击这是一个创建于 3015 天前的主题，其中的信息可能已经有所发展或是发生改变。
有个场景：
有两个列表页，使用 react router 分别映射为：/list1, /list2 。列表数据都是使用 redux state 的 dataList 字段。
有一个用户点了列表页 /list1 ，这时候会调用 action creator 发出一个 action （异步 action,使用 redux thunk middleware 或者 redux-api-middleware ）。因为网络等原因导致接口请求数据很慢，于是用户等不及就通过导航条转到 /list2 界面去了，而且 list2 的数据也成功获取（然而因为是 spa ，/list1 的请求还在 pending 中），当原来的 /list1 请求的数据返回时，/list1 和 /list2 的数据都是 storeState.dataList ，因此会把 list2 的数据覆盖掉。
对于这种情况有没有什么好的解决方法？能在切换路由跳转的时候，丢弃掉不必要的 action ？
有一种解决方式是不同的页面在storestate中使用不同的命名空间，但是这样的话会有个问题就是页面跳转多次以后，内存里可能会有许多页面的state数据，可能会导致不必要的内存占用问题
 |
1
broadliyn OP 想到一个解决方法，请求服务器数据前是给每个 state 对象加一个 timestamp ，数据返回需要 dispatch 一个 action 通知 reducer 更新数据的时候，先去判断时间戳是不是等于之前指定的，如果相等，则发送一个 action ，如果不是，则不做任何操作
|
 |
2
skyitachi 2016-08-23 14:13:43 +08:00
最简单的就是加个 timestamp 比对，其实可以加入一个数组，比如叫 pending_queue, 每次请求前塞入一个 timestamp ，请求结束后根据 action data 里的 timestamp 来做策略，因为队列的顺序代表着请求顺序，所以你可以根据需要来获取想要的顺序
|
Select Language