V2EX = way to explore
V2EX 是一个关于分享和探索的地方
Sign Up Now
For Existing Member  Sign In
broadliyn
V2EX  ›  问与答

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

  •  
  •   broadliyn · Aug 22, 2016 · 1890 views
    This topic created in 3539 days ago, the information mentioned may be changed or developed.

    有个场景:

    有两个列表页,使用 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 replies    2016-08-23 14:13:43 +08:00
    broadliyn
        1
    broadliyn  
    OP
       Aug 23, 2016
    想到一个解决方法,请求服务器数据前是给每个 state 对象加一个 timestamp ,数据返回需要 dispatch 一个 action 通知 reducer 更新数据的时候,先去判断时间戳是不是等于之前指定的,如果相等,则发送一个 action ,如果不是,则不做任何操作
    skyitachi
        2
    skyitachi  
       Aug 23, 2016
    最简单的就是加个 timestamp 比对,其实可以加入一个数组,比如叫 pending_queue, 每次请求前塞入一个 timestamp ,请求结束后根据 action data 里的 timestamp 来做策略,因为队列的顺序代表着请求顺序,所以你可以根据需要来获取想要的顺序
    About   ·   Help   ·   Advertise   ·   Blog   ·   API   ·   FAQ   ·   Solana   ·   846 Online   Highest 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 344ms · UTC 22:40 · PVG 06:40 · LAX 15:40 · JFK 18:40
    ♥ Do have faith in what you're doing.