V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
broadliyn
V2EX  ›  问与答

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

  •  
  •   broadliyn · 2016-08-22 16:38:09 +08:00 · 1317 次点击
    这是一个创建于 2797 天前的主题,其中的信息可能已经有所发展或是发生改变。

    有个场景:

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

    2 条回复    2016-08-23 14:13:43 +08:00
    broadliyn
        1
    broadliyn  
    OP
       2016-08-23 12:01:00 +08:00
    想到一个解决方法,请求服务器数据前是给每个 state 对象加一个 timestamp ,数据返回需要 dispatch 一个 action 通知 reducer 更新数据的时候,先去判断时间戳是不是等于之前指定的,如果相等,则发送一个 action ,如果不是,则不做任何操作
    skyitachi
        2
    skyitachi  
       2016-08-23 14:13:43 +08:00
    最简单的就是加个 timestamp 比对,其实可以加入一个数组,比如叫 pending_queue, 每次请求前塞入一个 timestamp ,请求结束后根据 action data 里的 timestamp 来做策略,因为队列的顺序代表着请求顺序,所以你可以根据需要来获取想要的顺序
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2584 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 04:31 · PVG 12:31 · LAX 21:31 · JFK 00:31
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.