初识 + 实践 Redux-Saga

介绍之前先来说说为什么研究 Redux-Saga , 之前有听说过但是没上手实践过,之前在看 Qcon 2016 蚂蚁金服分享的有关 antd 框架的视频中学习到了写的一个 dva https://github.com/dvajs/dva 基于 React Redux 轻量级的前端框架,里面写了一篇 React+Redux 最佳实践 https://github.com/sorrycc/blog/issues/1,他们处理异步操作时选择了 Redux-Saga,并没有选择我们常用的 Redux-thunk,因为之前一直都在使用 Redux-thunk 所以很好奇为什么最终选择了 Saga 并且搜索 GitHub 代码使用量,感觉用的人都很多,虽然数量可能并不能代表什么,哈哈,所以打算研究下看看,动手试试。。。

redux-thunk

redux-saga

1. 初识 Redux-Saga

刚接触的时候并不清楚这个处理异步的中间件到底怎么用,很多概念都是很模糊的,还上网看了一个关于针对分布式系统使用 Saga 的精彩演讲,https://www.youtube.com/watch?v=xDuwrtwYHu8 虽然跟着字幕也没听懂啥。最终总结下来,Redux-Saga 是啥?

Redux-Saga 是 Redux 的一个中间件,旨在使 Redux 应用程序处理副作用时很简单易懂,它通过利用 ES6 Generator 功能来实现这一点,允许我们编写看起来同步的异步代码,并且易于测试。

action 触发动作后 reducer 立即返回 state, 即同步,action 触发后过一段时间 reducer 返回 state 即异步;中间件来处理这部分工作,在 store.dispatch() 时增添异步操作功能;

2. Redux-thunk vs Redux-Saga

“Contrary to redux thunk, you don’t end up in callback hell, you can test your asynchronous flows easily and your actions stay pure.”

与 redux-thunk 相反,你不会陷入到回调函数的地狱中,你可以轻松的测试你的代码,并使你的代码保持干净。

代码保持纯洁干净,深有体会,之前需要在 action 里通过返回 dispatch 函数携带 action 传递给 store 。使用 saga 之后 action 里面只需要返回创建 action 并返回就可以了,一切例如:请求数据,对请求数据成功失败后的数据进行操作全部都可以交由 saga 来做;还有之前写的 middleware 中间件用于监听特定的 action 来改变 action 的都可以被省略;

redux-thunk

redux-saga

3. Redux-Saga API

主要来自 redux-saga/effect effect 可以理解为发送给 middleware 的指令,来操作 action 到 store 的异步操作;

createSagaMiddleware(...sagas) 创建 redux middleware 建立 sagas 与 redux store 关联,...sagas 接收 gengerator 函数

middleware.run(saga, ...args) 动态执行 saga generator 函数

takeEvery / takeLatest 创建一个新的 saga 任务

创建 saga 的描述信息

take 根据参数不同来进行匹配

put 指示 middleware 发起一个 action 到 store

call 调用 fn 以 args 执行

fork 以无阻塞方式执行

select 指示 middleware 获取 store state 上数据

4. 我们可以看下实际代码如何?


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.