在将React与Redux和Redux-Saga结合使用时,放置纯逻辑和同步逻辑的最佳位置是什么?

时间:2019-01-05 20:28:54

标签: reactjs redux react-redux redux-thunk redux-saga

在以前使用Redux-Thunk之后,我最近一直在使用Redux-Saga。到目前为止,我很喜欢它用于处理诸如网络请求之类的异步任务。因此,在使用sagas时,我肯定会将带有异步逻辑的代码放入sagas中。但是,我不确定将其余的同步逻辑放在哪里。我正在辩论是否应该将它们留在减速器或动作中,或者也应为它们创建冒险。

让我们使用一个简单的计数器组件,在该组件中,用户正在递增计数编号状态。这个例子是基本的,没有任何异步逻辑,只是用它来演示我的问题。在真实的应用程序中,我会同时具有异步和同步逻辑。

使用Sagas进行同步逻辑:

  1. 计数器组件调度START_INCREMENT操作。
  2. START_INCREMENT减速器大小写执行并仅返回旧状态。
  3. 正在观看START_INCREMENT的传奇运行,并且put是带有有效负载INCREMENT的{​​{1}}动作。
  4. incrementNumber减速器大小写执行并获取当前状态计数,并添加INCREMENT并返回新状态。

使用Reducer处理同步逻辑:

  1. 计数器组件使用有效载荷incrementNumber分派INCREMENT操作。
  2. incrementNumber减速器大小写执行并获取当前状态计数,并添加INCREMENT并返回新状态。

使用操作来处理同步逻辑:

  1. Counter组件以incrementNumber作为参数调度INCREMENT动作创建者。
  2. 动作创建者返回具有incrementNumber有效负载的动作INCREMENT动作。这是更新的计数。
  3. count减速器大小写执行并获取新计数,并替换旧状态下的计数并返回新状态。

每种方法对我来说都有好处和缺点。列出一些:

Sagas

优点

  1. 逻辑全在Sagas中,而没有散布在Sagas和行动/减少器中。

缺点

  1. 具有2个动作的更复杂的流程

减速器

优点

  1. 非常简单

缺点

  1. 逻辑将放在2个位置,sagas中的异步逻辑和reducers中的同步逻辑
  2. 如果需要,则无法访问其他状态片
  3. 还原剂必须是纯净的,我们不能使用副作用,例如浏览器或DOM API

动作创建者

优点

  1. 如果需要,可以使用redux-thunk访问其他状态片
  2. 可以在操作中添加其他副作用代码,例如浏览器或DOM API

缺点

  1. 逻辑将放在两个位置,异步逻辑在sagas中,而同步逻辑在动作中
  2. 更难测试

我倾向于将Sagas用于所有异步逻辑,将动作创建者用于所有同步逻辑,然后使减速器保持精简。这种方法有意义吗,还是有更好的方法来处理redux-saga中的同步逻辑?

谢谢!

0 个答案:

没有答案