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

前端应用使用 Redux 配合 API 处理数据的典型做法应该是什么样的?

  •  
  •   iugo · 2017-03-24 11:08:44 +08:00 · 1552 次点击
    这是一个创建于 2801 天前的主题,其中的信息可能已经有所发展或是发生改变。

    目前是这样做的:

    一个前端应用有两种数据, 远端数据, 自身数据.

    远端数据一般是从服务器拉取, 也可以缓存到本地然后根据过期时间从缓存中拿. 按下不表.

    对于使用 Redux 的应用, 将数据处理分为 APIs, Actions, 分别对应 远端数据, 自身数据.

    例子:

    两个 API:

    1. 查看用户列表
    2. 修改某一用户名

    一个 Action

    1. 更新用户列表

    实际的操作又会将这些混合在一起

    一个 修改用户名 操作(可能会使用 redux-thunk):

    1. 调用 API.2 修改某一用户名
    2. 调用 API.1 查看用户列表
    3. dispatch Action.1 更新用户列表

    这样做有哪些槽点? 哪些需要改进?

    5 条回复    2017-03-24 14:24:56 +08:00
    xieguanglei
        1
    xieguanglei  
       2017-03-24 12:08:20 +08:00   ❤️ 1
    1. redux-thunk 太老了,写起来太麻烦,推荐 redux-promise ,配合 async await 大大简化代码。
    2. 修改用户名的 post 请求直接返回修改后的用户信息, reducer 在修改用户名成功的 action 中单独更新那个用户。
    iugo
        2
    iugo  
    OP
       2017-03-24 12:56:12 +08:00
    @xieguanglei 实际工作中, API 数据的变动会比例子中复杂, 比如批量根据用户 ID 修改用户某一属性或者链式操作. 如果每一种对数据进行修改的 API 都要创建相关 Actions 就麻烦一些, 所以目前统一逻辑就是从 API 更新.
    iugo
        3
    iugo  
    OP
       2017-03-24 13:00:44 +08:00
    有时觉得 PouchDB 是一种挺合适的做法.
    Mikewu
        4
    Mikewu  
       2017-03-24 13:22:14 +08:00   ❤️ 1
    没有什么槽点,不过推荐使用 redux-saga 来处理异步 action ,会简约很多。
    可以一个操作对应一个 action ,比如说你的修改用户名 action 在 dispatch 之后,步骤 1 、 2 、 3 会集中在一个 Generator 函数处理,并且可以灵活调用其他的 Generator 函数。
    最后再推荐两个可能对你有用的工具: reduxsauce 、 apisauce
    cloud107202
        5
    cloud107202  
       2017-03-24 14:24:56 +08:00
    redux-saga +1

    redux-thunk 和 promise 都改变了 Action 的语义,不推荐
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2641 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 21ms · UTC 04:23 · PVG 12:23 · LAX 20:23 · JFK 23:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.