小编Tha*_*hai的帖子

如何处理Redux中复杂的副作用?

我一直在努力寻找解决这个问题的方法......

我正在开发一个带有在线记分牌的游戏.玩家可以随时登录和注销.完成游戏后,玩家将看到记分牌,并查看自己的排名,并自动提交分数.

记分牌显示了玩家的排名和排行榜.

截图

当用户完成播放(提交分数)以及用户只想查看他们的排名时,使用记分板.

这是逻辑变得非常复杂的地方:

  • 如果用户已登录,则将首先提交分数.保存新记录后,将加载记分板.

  • 否则,将立即加载记分板.玩家将获得登录或注册的选项.之后,将提交分数,然后记分板将再次刷新.

  • 但是,如果没有要提交的分数(只需查看高分表).在这种情况下,只需下载播放器的现有记录.但由于此操作不会影响记分牌,因此记分牌和玩家记录应同时下载.

  • 有无限数量的级别.每个级别都有不同的记分牌.当用户查看记分板时,用户正在"观察"该记分板.当它关闭时,用户停止观察它.

  • 用户可以随时登录和注销.如果用户注销,则用户的排名应该消失,如果用户以另一个帐户登录,则应该获取并显示该帐户的排名信息.

    ...但是,此信息只应针对用户当前正在观察的记分板进行.

  • 对于查看操作,结果应缓存在内存中,以便如果用户重新订阅同一记分板,则不会提取.但是,如果提交了分数,则不应使用缓存.

  • 任何这些网络操作都可能失败,并且播放器必须能够重试它们.

  • 这些操作应该是原子的.所有状态都应该一次更新(没有中间状态).

目前,我能够使用Bacon.js(功能性反应式编程库)来解决这个问题,因为它提供了原子更新支持.代码非常简洁,但现在它是一个混乱的不可预测的意大利面条代码.

我开始看Redux.所以我尝试构建商店,并想出了类似的东西(用YAMLish语法):

user: (user information)
record:
  level1:
    status: (loading / completed / error)
    data:   (record data)
    error:  (error / null)
scoreboard:
  level1:
    status: (loading / completed / error)
    data:
      - (record data)
      - (record data)
      - (record data)
    error:  (error / null)
Run Code Online (Sandbox Code Playgroud)

问题变成:我在哪里放置副作用.

对于无副作用的动作,这变得非常容易.例如,在LOGOUT行动时,record减速器可以简单地将所有记录都抛出.

但是,某些行为确实有副作用.例如,如果我在提交分数之前没有登录,那么我成功登录,该SET_USER操作将用户保存到商店中.

但是因为我有一个要提交的分数,这个SET_USER动作也必须引发一个AJAX请求,同时设置record.levelN.statusloading.

问题是:当我以原子方式登录时,我如何表示应该发生副作用(得分提交)

在Elm架构中,更新程序在使用形式时也会发出副作用 …

javascript flux redux

45
推荐指数
2
解决办法
8870
查看次数

标签 统计

flux ×1

javascript ×1

redux ×1