redux-saga

一、what is redux-saga

1、redux-saga是一个库、是一个redux的中间件，中间件的作用是为redux提供额外的功能。

2、功能是在react/redux中更好地、更容易的解决异步操作（action）的问题和访问浏览器缓存等。它像一个分散的支线单独负责解决异步的action。redux-saga在redux中多了一层，对action进行监听、当捕获到监听的action后派发一个新的任务去处理其它事情，然后根据需求判断是否要更新state。

3、主要api为：

• api源码参考链接：redux-saga-in-chinese.js.org/docs/api/in…
• api中文参考链接redux-saga-in-chinese.js.org/docs/api/in…

4、它是基于es6的generator语法实现的。它的所有任务都用yield effects 来完成的，为各项任务提供了各种effect创建器。比如：调用一个异步函数、发起action到store

5、官方解释为： redux-saga 是一个库使得程序有副作用（比如：数据获取等异步操作和访问浏览器缓存等）更容易管理、更高效执行、更容易测试、更好地处理故障。一个saga就像一个单独的线程在你的程序中、单独负责副作用。redux是个中间件、意味着该线程可以启动、暂停、取消从主程序中的普通redux action中，它有权限访问整个redux应用状态还可以操作redux action。它用了ES6的特性、被称为Generators、可 以使得异步容易的被读、写和测试。通过这样做，这些异步流看起来像你在同步javaScript代码（有点像 async/await，但是generators有我们需要的更好地特性）， 你可能以前用过redux-thunk来处理请求数据（fetching data），和redux-thunk相反，你不会陷入回调地狱，你可以更easily测试异步并且保持你的action（操作）纯洁、单一。 6、副作用的含义，在实际应用开发中，我们希望做些异步的（如ajax请求）且不纯粹的操作（如改变外部的状态），这些在函数式编程中被称为副作用。redux-saga就是用来处理副作用（异步任务）的一个中间件，它是一个接受事件、并可能触发新事件的过程管理者，为我们的应用管理复杂的流程。

二、why use redux-saga

在reducers中的所有操作都是同步的并且目的是单纯的纯粹的、即reducers都是存函数、存函数是指一个函数的返回结果只依赖于它的参数，并且在执行过程中不会对外部产生副作用，也就是说，给它传什么就吐什么。

1、优点：

* 流程拆分更细，异步的action 以及特殊要求的action（更复杂的action）都在sagas中做统一处理，流程逻辑更清晰，模块更干净；
* 以用同步的方式写异步代码，可以做一些async 函数做不到的事情 (无阻塞并发、取消请求)
* 能容易地测试 Generator 里所有的业务逻辑
* 可以通过监听Action 来进行前端的打点日志记录，减少侵入式打点对代码的侵入程度
复制代码

2、缺点：

* action 任务拆分更细，原有流程上相当于多了一个环节。对开发者的设计和抽象拆分能力更有要求，代码复杂性也有所增加。
* 异步请求相关的问题较难调试排查
复制代码

三、how use redux-sage

store/index.js

import { createStore, applyMiddleware } from 'redux';
import reducer from './reducer';
import createSagaMiddleware from 'redux-saga';
let sagaMiddleware = createSagaMiddleware(); //此中间件可以监听动作，执行对应的逻辑

let store = createStore(reducer, applyMiddleware(sagaMiddleware));
//saga就是一个generator函数 启动saga 就是启动generator就是 执行generator .next()
// run的原理就是co的库
sagaMiddleware.run(rootSaga);
export default store;
复制代码

saga.js

export function* counter() {
    //call第一个参数是方法，第二个之后的是传入此方法的参数
    // yield call(delay, 1000);
    //yield delay(1000);
    //在此处我要实现一秒后加一的操作
    //相当于dispatch(action) put就是直接派发动作
    yield put({ type: types.ADD });
}
export function* logger(action) {
    console.log('logger', action);
}
export function* loggerWatcher() {
    yield takeEvery(types.ASYNC_ADD, logger);
}
export default function* () {
    //all 类似于promise.all
    yield all([counterWatcher(), loggerWatcher()]);
}
复制代码

yield后边可以跟好多类型（generator、iterator、Object）

takeEvery ：监听每个调用，监听每一次的ASYNC_ADD动作，然后当这个动作发生的时候执行counter方法 //而且takeEvery不会阻塞当前generator代码的执行 yield takeEvery(types.ASYNC_ADD, counter);

throttle(): 节流函数

effect

• take: 监听一个动作
• put： dispatch 派发一个动作
• call: 调用一个方法返回一个promise
• apply: 应用一个函数
• fork: 派发一个新的任务，不会阻塞当前运行，新的线程
• cancel: 结束一个任务
• race: 赛跑，如果一个先执行到了，其它的失效。

四、what is the principle of redux-saga

• saga采用generators函数来yield effects（包含指令的文本对象）
• generator函数的作用是可以暂停执行、再次执行的时候从上次暂停的地方继续执行
• effect是一个简单的对象，改对象包含了一些给middleware解释执行的信息
• 你可以通过使用effect API如（fork、call、take、put、cancel）等来创建effect

五、redux-saga的分类

• root saga立即启动saga的唯一入口(第一级)
• watcher saga（第二级） 监听被dispatch的actions，当接受action或者知道其被触发时，调用worker执行任务
• worker saga（第三级） 做左右的工作，如调用api，进行异步的请求，获取异步封装结果，

转载于:https://juejin.im/post/5bd6acd96fb9a05d035c2558