redux-saga学习

2022-11-04 20:06:11 浏览数 (2)

大家好,又见面了,我是你们的朋友全栈君。

如果redux需要用到 side effect 异步操作,redux-thunk 和 redux-saga 绝对是目前两个最受欢迎的中间件插件。

redux-saga

redux-saga是一个用于管理redux应用异步操作的中间件,redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理,可以用来代替redux-thunk中间件。

这意味着应用的逻辑会存在两个地方:

  • reducer负责处理action的state更新
  • sagas负责协调那些复杂或者异步的操作

React Redux Cycle(来源:https://www.youtube.com/watch?v=1QI-UE3-0PU)

Sagas 特点

  • sagas是通过generator函数来创建的
  • sagas可以被看作是在后台运行的进程。sagas监听发起的action,然后决定基于这个action来做什么 (比如:是发起一个异步请求,还是发起其他的action到store,还是调用其他的sagas 等 )
  • 在redux-saga的世界里,所有的任务都通过用 yield Effects 来完成 ( effect可以看作是redux-saga的任务单元 )
  • redux-saga启动的任务可以在任何时候通过手动来取消,也可以把任务和其他的Effects放到 race 方法里以自动取消

redux-saga 使用了 ES6 的 Generator 功能,让异步的流程更易于读取,写入和测试。不同于 redux thunk,你不会再遇到回调地狱了,你可以很容易地测试异步流程并保持你的 action 是干净的。(Generator可以通过next查看每一步的调用结果)

Hello redux-saga

主要根据官方案例构建

初始化项目

0 人点赞