1. redux-saga #

• redux-saga 是一个 redux 的中间件，而中间件的作用是为 redux 提供额外的功能。
• 在 reducers 中的所有操作都是同步的并且是纯粹的，即 reducer 都是纯函数，纯函数是指一个函数的返回结果只依赖于它的参数，并且在执行过程中不会对外部产生副作用，即给它传什么，就吐出什么。
• 但是在实际的应用开发中，我们希望做一些异步的（如Ajax请求）且不纯粹的操作（如改变外部的状态），这些在函数式编程范式中被称为“副作用”。

redux-saga 就是用来处理上述副作用（异步任务）的一个中间件。它是一个接收事件，并可能触发新事件的过程管理者，为你的应用管理复杂的流程。

2. redux-saga工作原理 #

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

3. redux-saga分类 #

• worker saga 做实际的工作，如调用API，进行异步请求，获取异步封装结果
• watcher saga 监听被dispatch的actions,当接受到action或者知道其被触发时，调用worker执行任务
• root saga 立即启动saga的唯一入口

4. 构建项目 #

4.1 初始化项目 #

cnpm install create-react-app -g 
create-react-app zhufeng-saga-start
cd zhufeng-saga-start
cnpm i redux react-redux redux-saga tape --save

5. 跑通saga #

5.1 src\index.js #

src\index.js

import store from './store';

5.2 store\index.js #

src\store\index.js

import {createStore, applyMiddleware} from 'redux';
import reducer from './reducer';
import createSagaMiddleware from 'redux-saga';
//首先我们引入 ./sagas 模块中的 Saga。然后使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware
import {helloSaga} from './sagas';
let sagaMiddleware = createSagaMiddleware();
//运行 helloSaga 之前，我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 sagaMiddleware.run(helloSaga) 运行 Saga。
let store=applyMiddleware(sagaMiddleware)(createStore)(reducer);
sagaMiddleware.run(helloSaga);
export default store;

5.3 store\reducer.js #

src\store\reducer.js

export default function (state,action) {}

5.4 store\sagas.js #

src\store\sagas.js

//helloSaga它只是打印了一条消息，然后退出。
export function* helloSaga() {
    console.log('Hello Saga!');
}

6. 异步计数器 #

6.1 components/Counter.js #

src/components/Counter.js

import React,{Component} from 'react'
import {connect} from 'react-redux';
import actions from '../store/actions';
class Counter extends Component{
    render() {
        return (
            <div>
                <p>{this.props.number}</p>
                <button onClick={this.props.incrementAsync}>+</button>
            </div>
      )
  }
}
export default connect(
    state => state,
    actions
)(Counter);

6.2 src/index.js #

src/index.js

import React from 'react'
import ReactDOM from 'react-dom';
import Counter from './components/Counter';
import {Provider} from 'react-redux';
import store from './store';
ReactDOM.render(<Provider store={store}>
  <Counter/>
</Provider>,document.querySelector('#root'));

6.3 store/action-types.js #

src/store/action-types.js

export const INCREMENT='INCREMENT';
export const INCREMENT_ASYNC='INCREMENT_ASYNC';

6.4 store/actions.js #

src/store/actions.js

import * as types from './action-types';
export default {
    incrementAsync() {
        return {type:types.INCREMENT_ASYNC}
    }
}

6.5 src/store/index.js #

src/store/index.js

import {createStore, applyMiddleware} from 'redux';
import reducer from './reducer';
import createSagaMiddleware from 'redux-saga';
//首先我们引入 ./sagas 模块中的 Saga。然后使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware
import rootSaga from './sagas';
let sagaMiddleware = createSagaMiddleware();
//运行 rootSaga 之前，我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 sagaMiddleware.run(helloSaga) 运行 Saga。
let store=applyMiddleware(sagaMiddleware)(createStore)(reducer);
sagaMiddleware.run(rootSaga);
export default store;

6.6 store/reducer.js #

src/store/reducer.js

import * as types from './action-types';
export default function (state={number:0},action) {
    switch(action.type){
        case types.INCREMENT:
            return {number: state.number+1};
        default:
            return state;
    }
}

6.7 store/sagas.js #

src/store/sagas.js

import { delay,all,put, takeEvery } from 'redux-saga/effects'

//worker Saga: 将执行异步的 increment 任务
//incrementAsync Saga 通过 delay(1000) 延迟了 1 秒钟，然后 dispatch 一个叫 INCREMENT 的 action。
export function* incrementAsync() {
    //工具函数 delay，这个函数返回一个延迟 1 秒再 resolve 的 Promise 我们将使用这个函数去 block(阻塞) Generator
    //Sagas 被实现为 Generator functions，它会 yield 对象到 redux-saga middleware。 被 yield 的对象都是一类指令，指令可被 middleware 解释执行。当 middleware 取得一个 yield 后的 Promise，middleware 会暂停 Saga，直到 Promise 完成
    //incrementAsync 这个 Saga 会暂停直到 delay 返回的 Promise 被 resolve，这个 Promise 将在 1 秒后 resolve
    //当 middleware 拿到一个被 Saga yield 的 Effect，它会暂停 Saga，直到 Effect 执行完成，然后 Saga 会再次被恢复
    yield delay(1000)
    //一旦 Promise 被 resolve，middleware 会恢复 Saga 接着执行，直到遇到下一个 yield
    //在这里下一个语句是另一个被 yield 的对象：调用 put({type: 'INCREMENT'}) 的结果，意思是告诉 middleware 发起一个 INCREMENT 的 action
    //put 就是我们称作 Effect 的一个例子。Effects 是一些简单 Javascript 对象，包含了要被 middleware 执行的指令
    yield put({ type: 'INCREMENT' })
}
//takeEvery，用于监听所有的 INCREMENT_ASYNC action，并在 action 被匹配时执行 incrementAsync 任务
export function* watchIncrementAsync() {
    yield takeEvery('INCREMENT_ASYNC', incrementAsync)
}

export function* helloSaga() {
    console.log('Hello Saga!');
}

export default function* rootSaga() {
    //这个 Saga yield 了一个数组，值是调用 helloSaga 和 watchIncrementAsync 两个 Saga 的结果。意思是说这两个 Generators 将会同时启动
    yield all([
      helloSaga(),
      watchIncrementAsync()
    ])
  }

7. 单元测试 #

• babel-node：提供一个支持ES6的REPL环境，支持Node的REPL环境的所有功能，可以直接运行ES6代码

7.1 安装模块 #

cnpm i @babel/core @babel/node @babel/plugin-transform-modules-commonjs --save-dev

7.2 测试脚本 #

"scripts": {
    "test": "babel-node src/store/sagas.spec.js --plugins @babel/plugin-transform-modules-commonjs"
}

7.3 utils.js #

src\utils.js

export const   delay = (ms)=>{
    return new Promise(function(resolve){
        setTimeout(()=>{
            resolve();
        },ms);
    });
}

7.4 store\sagas.spec.js #

src\store\sagas.spec.js

import test from 'tape';
import { all,put, takeEvery,call } from 'redux-saga/effects';
import { incrementAsync }  from './sagas';
import {delay} from '../utils';
/**
 * incrementAsync 是一个 Generator 函数。执行的时候返回一个 iterator object，这个 iterator 的 next 方法返回一个对象
 * gen.next() // => { done: boolean, value: any }
 * value 字段包含被 yield 后的表达式，也就是 yield 后面那个表达式的结果。
 * done 字段指示 generator 是结束了，还是有更多的 yield 表达式
 */
test('incrementAsync Saga test', (assert) => {
    const gen = incrementAsync();
    assert.deepEqual(
    gen.next().value,
    call(delay,3000),
    'incrementAsync should return a Promise that will resolve after 3 second'
  ) 

   assert.deepEqual(
    gen.next().value,
    put({type: 'INCREMENT'}),
    'incrementAsync Saga must dispatch an INCREMENT action'
  )
  assert.deepEqual(
    gen.next(),
    {done:true,value:undefined},
    'incrementAsync Saga must be done'
  )

  assert.end() 
});

8. 声明式effects #

• 在 redux-saga 的世界里，Sagas 都用 Generator 函数实现。我们从 Generator 里 yield 纯 JavaScript 对象以表达 Saga 逻辑
• 我们称呼那些对象为 Effect。Effect 是一个简单的对象，这个对象包含了一些给 middleware 解释执行的信息
• 你可以把 Effect 看作是发送给 middleware 的指令以执行某些操作（调用某些异步函数，发起一个 action 到 store，等等）
• cps(fn, ...args) 创建一个 Effect 描述信息，用来命令 middleware 以 Node 风格的函数（Node style function）的方式调用 fn
• call(fn, ...args) 创建一个 Effect 描述信息，用来命令 middleware 以参数 args 调用函数 fn
• call([context, fn], ...args) 类似 call(fn, ...args)，但支持传递 this 上下文给 fn,在调用对象方法时很有用
• apply(context, fn, [args]) call([context, fn], ...args) 的另一种写法

8.1 src/store/sagas.js #

src/store/sagas.js

import {all,put, takeEvery,call,takeLatest,cps,apply } from 'redux-saga/effects'
import {delay,read} from '../utils';

export function* readAsync() {
    let content = yield cps(read,'1.txt');//cps(fn, ...args)
    console.log('content=',content);
}

export function* incrementAsync() {
    //工具函数 delay，这个函数返回一个延迟 1 秒再 resolve 的 Promise 我们将使用这个函数去 block(阻塞) Generator
    //Sagas 被实现为 Generator functions，它会 yield 对象到 redux-saga middleware。 被 yield 的对象都是一类指令，指令可被 middleware 解释执行。当 middleware 取得一个 yield 后的 Promise，middleware 会暂停 Saga，直到 Promise 完成
    //incrementAsync 这个 Saga 会暂停直到 delay 返回的 Promise 被 resolve，这个 Promise 将在 1 秒后 resolve
    //put 还是 call 都不执行任何 dispatch 或异步调用，它们只是简单地返回 plain Javascript 对象
    yield call(delay,3000);//call(fn, ...args)
    //yield call([null,delay],3000);  call([context, fn], ...args)
    //yield apply(null,delay,3000); apply(context, fn, args)
    //yield delay(3000);
    yield put({ type: 'INCREMENT' })
}

8.2 store/sagas.spec.js #

src/store/sagas.spec.js

import test from 'tape';
import { all,put, takeEvery,call,cps,apply } from 'redux-saga/effects';
import { incrementAsync,readAsync }  from './sagas';
import {delay,read} from '../utils';

test('readAsync Saga test', (assert) => {
  const gen = readAsync();
  assert.deepEqual(
    gen.next().value,
    cps(read,'1.txt'),
    'readAsync should be done  after 3 second'
  )
  assert.deepEqual(
    gen.next(),
    {done:true,value:undefined},
    'readAsync Saga must be done'
  )
  assert.end();
});

8.3 src/utils.js #

src/utils.js

export function read(filename,callback){
    setTimeout(function(){
        console.log('read',filename);
     callback(null,filename);
    },1000);
 }

9. 错误处理 #

9.1 try catch #

• 我们可以使用熟悉的 try/catch 语法在 Saga 中捕获错误

src\store\sagas.js

export const delay2=ms => new Promise((resolve,reject) => {
    setTimeout(() => {
        if(Math.random()>.5){
            resolve();
        }else{
            reject();
        }
    },ms);
});
export function* incrementAsync2() {
    try{
        yield call(delay2,3000);
        yield put({ type:'INCREMENT'});
        alert('操作成功');
    }catch(error){
        alert('操作失败');
    }
}
//takeEvery，用于监听所有的 INCREMENT_ASYNC action，并在 action 被匹配时执行 incrementAsync 任务
export function* watchIncrementAsync() {
    //yield takeEvery('INCREMENT_ASYNC', incrementAsync);
    //只想得到最新那个请求的响应,如果已经有一个任务在执行的时候启动另一个 fetchData ，那之前的这个任务会被自动取消
    yield takeLatest('INCREMENT_ASYNC', incrementAsync2);
}

9.2 错误标识 #

• 你也可以让你的 API 服务返回一个正常的含有错误标识的值 src\store\sagas.js

  export const delay3=ms => new Promise((resolve,reject) => {
    setTimeout(() => {
        let data = Math.random();
        resolve({
            code:data>.5?0:1,
            data
        });
    },ms);
  });
  export function* incrementAsync3() {
    let {code,data} = yield call(delay3,1000);
    if(code === 0){
        yield put({ type:'INCREMENT'});
        alert('操作成功 data='+data);
    }else{
        alert('操作失败');
    }
  }
  //takeEvery，用于监听所有的 INCREMENT_ASYNC action，并在 action 被匹配时执行 incrementAsync 任务
  export function* watchIncrementAsync() {
    //yield takeEvery('INCREMENT_ASYNC', incrementAsync);
    //只想得到最新那个请求的响应,如果已经有一个任务在执行的时候启动另一个 fetchData ，那之前的这个任务会被自动取消
    yield takeLatest('INCREMENT_ASYNC', incrementAsync3);
  }

10. take #

• takeEvery 只是一个在强大的低阶 API 之上构建的 wrapper effect
• take 就像我们更早之前看到的 call 和 put。它创建另一个命令对象，告诉 middleware 等待一个特定的 action

10.1 store/sagas.js #

src/store/sagas.js

import {all,put,take,select } from 'redux-saga/effects'
import {INCREMENT_ASYNC,INCREMENT} from './action-types';

export function* watchIncrementAsync() {
    for (let i = 0; i < 3; i++) {
        const action = yield take(INCREMENT_ASYNC);
        console.log(action);
        yield put({type:INCREMENT});
    }
    alert('最多只能点三次!');
}
export function* watchAndLog() {
    //take 就像我们更早之前看到的 call 和 put。它创建另一个命令对象，告诉 middleware 等待一个特定的 action
    //在 take 的情况中，它将会暂停 Generator 直到一个匹配的 action 被发起了
    //在 takeEvery 的情况中，被调用的任务无法控制何时被调用， 它们将在每次 action 被匹配时一遍又一遍地被调用。并且它们也无法控制何时停止监听
    //在 take 的情况中，控制恰恰相反。与 action 被 推向（pushed） 任务处理函数不同，Saga 是自己主动 拉取（pulling） action 的。 看起来就像是 Saga 在执行一个普通的函数调用 action = getNextAction()，这个函数将在 action 被发起时 resolve
    while(true){
        let action = yield take('*');
        const state = yield select();
        console.log('action', action);
        console.log('state after', state);
    }
}

export default function* rootSaga() {
    yield all([
        watchAndLog(),
        watchIncrementAsync()
    ])
  }

11. 登陆流程 #

11.1 src/index.js #

src/index.js

import React from 'react'
import ReactDOM from 'react-dom';
import Login from './components/Login';
import {Provider} from 'react-redux';
import store from './store';
ReactDOM.render(<Provider store={store}>
  <Login/>
</Provider>,document.querySelector('#root'));

11.2 store/action-types.js #

src/store/action-types.js

export const INCREMENT='INCREMENT';
export const INCREMENT_ASYNC='INCREMENT_ASYNC';
export const LOGIN_REQUEST='LOGIN_REQUEST';
export const LOGIN_SUCCESS='LOGIN_SUCCESS';
export const SET_USERNAME='SET_USERNAME';
export const LOGIN_ERROR='LOGIN_ERROR';
export const LOGOUT='LOGOUT';

11.3 store/actions.js #

src/store/actions.js

import * as types from './action-types';
export default {
    incrementAsync() {
        return {type:types.INCREMENT_ASYNC}
    },
    login(username,password){
        return {type:types.LOGIN_REQUEST,username,password}
    },
    logout(){
        return {type:types.LOGOUT}
    }
}

11.4 store/reducer.js #

src/store/reducer.js

import * as types from './action-types';
export default function (state={number:0,username:null},action) {
    switch(action.type){
        case types.INCREMENT:
            return {number: state.number+1};
        case types.LOGIN_ERROR:
            return {error: action.error};
        case types.SET_USERNAME:
            return {username: action.username};
        default:
            return state;
    }
}

11.5 store/sagas.js #

src/store/sagas.js

import { call, all, put, take } from "redux-saga/effects";
import {LOGIN_ERROR,LOGIN_REQUEST,SET_USERNAME,LOGOUT} from "./action-types";
import Api from "../Api";
//首先我们创建了一个独立的 Generator login，它将执行真实的 API 调用并在成功后通知 Store。
function* login(username, password) {
  try {
    //如果 Api 调用成功了，login 将发起一个 LOGIN_SUCCESS action 然后返回获取到的 token。 如果调用导致了错误，将会发起一个 LOGIN_ERROR action。
    const token = yield call(Api.login, username, password);
    return token;
  } catch (error) {
    alert(error);
    //在 login 失败的情况下，它将返回一个 undefined 值，这将导致 loginFlow 跳过当前处理进程并等待一个新的 LOGIN_REQUEST action
    yield put({
      type: LOGIN_ERROR,
      error
    });
  }
}

function* loginFlow() {
  //一旦到达流程最后一步（LOGOUT），通过等待一个新的 LOGIN_REQUEST action 来启动一个新的迭代
  while (true) {
    //loginFlow 首先等待一个 LOGIN_REQUEST action,然后调用一个 call 到 login 任务
    //call 不仅可以用来调用返回 Promise 的函数。我们也可以用它来调用其他 Generator 函数
    //loginFlow 将等待 login 直到它终止或返回（即执行 api 调用后，发起 action 然后返回 token 至 loginFlow）
    const { username, password } = yield take(LOGIN_REQUEST);
    const token = yield call(login, username, password);
    //在 login 失败的情况下，它将返回一个 undefined 值，这将导致 loginFlow 跳过当前处理进程并等待一个新的 LOGIN_REQUEST action
    if (token) {
      yield put({
        type: SET_USERNAME,
        username
      });
      //如果调用 login 成功，loginFlow 将在 DOM storage 中存储返回的 token，并等待 LOGOUT action
      Api.storeItem("token", token);
      //当用户登出，我们删除存储的 token 并等待一个新的用户登录
      yield take(LOGOUT);
      Api.clearItem("token");
      yield put({
        type: SET_USERNAME,
        username: null
      });
    }
  }
}

export default function* rootSaga() {
  yield all([loginFlow()]);
}

11.6 src/Api.js #

src/Api.js

export default {
    login(username, password){
        return new Promise(function(resolve,reject){
            setTimeout(()=>{
                if(Math.random()>.5){
                    resolve(username+'-'+password);
                }else{
                    reject('登录失败');
                }
            },1000);
        });
    },
    storeItem(key,value){
        localStorage.setItem(key,value);
    },
    clearItem(){
        localStorage.removeItem('token');
    }
}

11.7 components/Login.js #

src/components/Login.js

import React,{Component} from 'react'
import {connect} from 'react-redux';
import actions from '../store/actions';
class Login extends Component{
    constructor(props){
        super(props);
        this.username=React.createRef();
        this.password=React.createRef();
    }
    login = (event)=>{
        event.preventDefault();
        let username = this.username.current.value;
        let password = this.password.current.value;
        this.props.login(username,password);
    }
    logout = (event)=>{
        event.preventDefault();
        this.props.logout();
    }
    render() {
        let {username} = this.props;
        let loginForm = (
            <form>
                <label>用户名</label><input ref={this.username}/><br/>
                <label>密码</label><input ref={this.password}/><br/>
                <button onClick={this.login}>登录</button>
            </form>
        )
        let logoutForm = (
            <form >
                 用户名:{username}<br/>
                <button onClick={this.logout}>退出</button>
            </form>
        )
        return (
            username?logoutForm:loginForm
      )
  }
}
export default connect(
    state => state,
    actions
)(Login);

12. fork #

• 当 loginFlow 在 login 中被阻塞了，最终发生在开始调用和收到响应之间的 LOGOUT 将会被错过
• 我们需要的是一些非阻塞调用login
• 为了表示无阻塞调用，redux-saga 提供了另一个 Effect：fork,当我们 fork 一个 任务，任务会在后台启动，调用者也可以继续它自己的流程，而不用等待被 fork 的任务结束

12.1 store/sagas.js #

src/store/sagas.js

import {call,all,put,take,fork} from 'redux-saga/effects'
import {LOGIN_ERROR,LOGOUT,LOGIN_REQUEST,LOGIN_SUCCESS,SET_USERNAME} from './action-types';
import Api from '../Api'
//首先我们创建了一个独立的 Generator login，它将执行真实的 API 调用并在成功后通知 Store。
function* login(username, password) {
    try {
        //如果 Api 调用成功了，login 将发起一个 LOGIN_SUCCESS action 然后返回获取到的 token。 如果调用导致了错误，将会发起一个 LOGIN_ERROR action。
        const token = yield call(Api.login, username, password);
        yield put({type: LOGIN_SUCCESS, token});
        yield put({type: SET_USERNAME, username});
        //如果调用 login 成功，loginFlow 将在 DOM storage 中存储返回的 token，并等待 LOGOUT action   
        Api.storeItem('token',token);
    } catch(error) {
        //在 login 失败的情况下，它将返回一个 undefined 值，这将导致 loginFlow 跳过当前处理进程并等待一个新的 LOGIN_REQUEST action
        yield put({type: LOGIN_ERROR, error});
    }
  }

  function* loginFlow() {
    //一旦到达流程最后一步（LOGOUT），通过等待一个新的 LOGIN_REQUEST action 来启动一个新的迭代
    while(true) {
        //loginFlow 首先等待一个 LOGIN_REQUEST action,然后调用一个 call 到 login 任务
        //call 不仅可以用来调用返回 Promise 的函数。我们也可以用它来调用其他 Generator 函数
        //loginFlow 将等待 login 直到它终止或返回（即执行 api 调用后，发起 action 然后返回 token 至 loginFlow）
        const {username, password} = yield take(LOGIN_REQUEST);
        //自从 login 的 action 在后台启动之后，我们获取不到 token 的结果,所以我们需要将 token 存储操作移到 login 任务内部
        yield fork(login, username, password);
        //yield take(['LOGOUT', 'LOGIN_ERROR'])。意思是监听 2 个并发的 action
        //如果 login 任务在用户登出之前成功了，它将会发起一个 LOGIN_SUCCESS action 然后结束。 然后 loginFlow Saga 只会等待一个未来的 LOGOUT action 被发起
        //如果 login 在用户登出之前失败了，它将会发起一个 LOGIN_ERROR action 然后结束
        //如果在 login 结束之前，用户就登出了，那么 loginFlow 将收到一个 LOGOUT action 并且也会等待下一个 LOGIN_REQUEST
        yield take([LOGOUT,LOGIN_ERROR]);
        Api.clearItem('token');
    }
  }
export default function* rootSaga() {
    yield all([
        loginFlow()
    ])
}

13. 取消任务 #

• 如果我们在 API 调用期间收到一个 LOGOUT action，我们必须要 取消 login 处理进程,否则将有 2 个并发的任务， 并且 login 任务将会继续运行，并在成功的响应（或失败的响应）返回后发起一个 LOGIN_SUCCESS action（或一个 LOGIN_ERROR action），而这将导致状态不一致
• cancel Effect 不会粗暴地结束我们的 login 任务，相反它会给予一个机会执行清理的逻辑,在 finally 区块可以处理任何的取消逻辑（以及其他类型的完成逻辑）

13.1 components/Login.js #

src/components/Login.js

class Login extends Component{
    render() {
        let {token} = this.props;
        let loginForm = (
            <form>
                <label>用户名</label><input ref={this.username}/><br/>
                <label>密码</label><input ref={this.password}/><br/>
                <button onClick={this.login}>登录</button>
+                <button onClick={this.logout}>退出</button>
            </form>
        )
  }
}

13.2 store/sagas.js #

src/store/sagas.js

import {call,all,put,take,fork,cancel,cancelled} from 'redux-saga/effects'
import {LOGIN_ERROR,LOGOUT,LOGIN_REQUEST,LOGIN_SUCCESS} from './action-types';
import Api from '../Api'

//首先我们创建了一个独立的 Generator login，它将执行真实的 API 调用并在成功后通知 Store。
function* login(username, password) {
    try {
        //如果 Api 调用成功了，login 将发起一个 LOGIN_SUCCESS action 然后返回获取到的 token。 如果调用导致了错误，将会发起一个 LOGIN_ERROR action。
        Api.storeItem('loading','true');
        const token = yield call(Api.login, username, password);
        yield put({type: LOGIN_SUCCESS, token});
        //如果调用 login 成功，loginFlow 将在 DOM storage 中存储返回的 token，并等待 LOGOUT action   
        Api.storeItem('token',token);
        Api.storeItem('loading','xx');
    } catch(error) {
        //在 login 失败的情况下，它将返回一个 undefined 值，这将导致 loginFlow 跳过当前处理进程并等待一个新的 LOGIN_REQUEST action
        yield put({type: LOGIN_ERROR, error});
        Api.storeItem('loading','false');
    } finally {
        console.log(cancelled())
        if (yield cancelled()) {
          // ... put special cancellation handling code here
          Api.storeItem('loading','false');
        }
      }
  }

  function* loginFlow() {
    //一旦到达流程最后一步（LOGOUT），通过等待一个新的 LOGIN_REQUEST action 来启动一个新的迭代
    while(true) {
        //loginFlow 首先等待一个 LOGIN_REQUEST action,然后调用一个 call 到 login 任务
        //call 不仅可以用来调用返回 Promise 的函数。我们也可以用它来调用其他 Generator 函数
        //loginFlow 将等待 login 直到它终止或返回（即执行 api 调用后，发起 action 然后返回 token 至 loginFlow）
        const {username, password} = yield take(LOGIN_REQUEST);
        //自从 login 的 action 在后台启动之后，我们获取不到 token 的结果,所以我们需要将 token 存储操作移到 login 任务内部
        //yield fork 的返回结果是一个 Task Object
        const task = yield fork(login, username, password);
        //yield take(['LOGOUT', 'LOGIN_ERROR'])。意思是监听 2 个并发的 action
        //如果 login 任务在用户登出之前成功了，它将会发起一个 LOGIN_SUCCESS action 然后结束。 然后 loginFlow Saga 只会等待一个未来的 LOGOUT action 被发起
        //如果 login 在用户登出之前失败了，它将会发起一个 LOGIN_ERROR action 然后结束
        //如果在 login 结束之前，用户就登出了，那么 loginFlow 将收到一个 LOGOUT action 并且也会等待下一个 LOGIN_REQUEST
        const action = yield take([LOGOUT,LOGIN_ERROR]);
        //将task 传入给 cancel Effect。 如果任务仍在运行，它会被中止,如果任务已完成，那什么也不会发生
        if(action.type == LOGOUT){
            yield cancel(task);
        }
        Api.clearItem('token');
    }
}
export default function* rootSaga() {
    yield all([
        loginFlow()
    ])
}

14. race #

• 有时候我们同时启动多个任务，但又不想等待所有任务完成，我们只希望拿到 胜利者：即第一个被 resolve（或 reject）的任务
• race 的另一个有用的功能是，它会自动取消那些失败的 Effects

14.1 src/index.js #

src/index.js

import React from 'react'
import ReactDOM from 'react-dom';
import Login from './components/Login';
import Recorder from './components/Recorder';
import {Provider} from 'react-redux';
import store from './store';
ReactDOM.render(<Provider store={store}>
  <Recorder/>
</Provider>,document.querySelector('#root'));

14.2 store/action-types.js #

src/store/action-types.js

export const CANCEL_TASK='CANCEL_TASK';

14.3 store/actions.js #

src/store/actions.js

stop(){
        return {type:types.CANCEL_TASK}
}

14.4 store/sagas.js #

src/store/sagas.js

import {call,all,put,take,race} from 'redux-saga/effects'
import {INCREMENT,CANCEL_TASK} from './action-types';
import {delay} from '../utils';
/**
 * 有时候我们同时启动多个任务，但又不想等待所有任务完成，我们只希望拿到 胜利者：即第一个被 resolve（或 reject）的任务
 * a=1000 b=undefined
 */
function* raceFlow() {
    const {a, b} = yield race({
        a: call(delay, 1000),
        b: call(delay, 2000)
    });
    console.log('a='+a,'b='+b);
}

//每隔一秒钟让数字加1

function* start() {
    while(true){
        yield call(delay,1000);
        yield put({type:INCREMENT});
    }
}
//race 的另一个有用的功能是，它会自动取消那些失败的 Effects
function* recorder() {
    yield race({
        start: call(start),
        stop: take(CANCEL_TASK)
    });
}
export default function* rootSaga() {
    //yield all([raceFlow()])
    yield all([recorder()])
}

14.5 components/Counter.js #

src/components/Counter.js

import React,{Component} from 'react'
import {connect} from 'react-redux';
import actions from '../store/actions';
class Counter extends Component{
    render() {
        return (
            <div>
                <p>{this.props.number}</p>
                <button onClick={this.props.stop}>停止</button>
            </div>
      )
  }
}
export default connect(
    state => state,
    actions
)(Counter);

参考 #

• zhufeng-saga-start