React Redux 配合 React Router 的异步 action 问题

2016-08-22 16:38:09 +08:00
 broadliyn

有个场景:

有两个列表页,使用 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数据,可能会导致不必要的内存占用问题

1445 次点击
所在节点    问与答
2 条回复
broadliyn
2016-08-23 12:01:00 +08:00
想到一个解决方法,请求服务器数据前是给每个 state 对象加一个 timestamp ,数据返回需要 dispatch 一个 action 通知 reducer 更新数据的时候,先去判断时间戳是不是等于之前指定的,如果相等,则发送一个 action ,如果不是,则不做任何操作
skyitachi
2016-08-23 14:13:43 +08:00
最简单的就是加个 timestamp 比对,其实可以加入一个数组,比如叫 pending_queue, 每次请求前塞入一个 timestamp ,请求结束后根据 action data 里的 timestamp 来做策略,因为队列的顺序代表着请求顺序,所以你可以根据需要来获取想要的顺序

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/300988

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX