阅读 228

redux-saga英雄指南

1.2.4. redux-saga

redux-saga是什么,解决了什么痛点?

redux-saga 是一个用于管理应用程序 Side Effect(副作用,例如异步获取数据,访问浏览器缓存等)的 library,它的目标是让副作用管理更容易,执行更高效,测试更简单,在处理故障时更容易。

什么是saga

  • saga是Middleware的一种,工作于action和reducer之间。
  • 一个 saga 就像是应用程序中一个单独的线程,它独自负责处理副作用

什么是Effect

在 redux-saga 的世界里,Sagas 都用 Generator 函数实现。我们从 Generator 里 yield 纯 JavaScript 对象以表达 Saga 逻辑。 我们称呼那些对象为 EffectEffect 是一个简单的对象,这个对象包含了一些给 middleware 解释执行的信息。 你可以把 Effect 看作是发送给 middleware 的指令以执行某些操作(调用某些异步函数,发起一个 action 到 store,等等)

执行dispatch(action)时,redux-saga经历了什么过程

  • saga需要一个全局监听器(watcher saga),用于监听组件发出的action,将监听到的action转发给对应的接收器(worker saga),再由接收器执行具体任务,任务执行完后,再发出另一个action交由reducer修改state,所以这里必须注意:watcher saga监听的action和对应worker saga中发出的action不能是同一个,否则造成死循环
  • 在saga中,全局监听器和接收器都使用Generator函数和saga自身的一些辅助函数实现对整个流程的管控
  • 整个流程可以简单描述为

Component —> Action1 —> Watcher Saga —> Worker Saga —> Action2 —> Reducer —> Component

  • 相比thunk,saga是多了一个action的,因为saga是将业务的触发(watcher saga)和业务的执行(worker saga)分开描述的
  • 只需创建一个对象来指示 middleware 我们需要发起一些 action,然后让 middleware 执行真实的 dispatch。 这种方式我们就可以同样的方式测试 Generator 的 dispatch:只需检查 yield 后的 Effect,并确保它包含正确的指令。
  • redux-saga 为此提供了另外一个函数 put,这个函数用于创建 dispatch Effect。
文章分类
前端
文章标签