Redux Saga

redux-saga 用于处理异步请求, 是 redux 的一个中间件, 使用了 ES6 的 Generator 函数, 让异步的流程更加易于读取、写入和测试

数据流比对

1
2
3
4
5
6
7
> redux 数据流: UI -> action(plain) -> reducer -> state -> UI

> redux 数据流(增加中间件): UI -> action(side function) -> middleware -> action(plain) -> reducer -> state -> UI

> redux-thunk 数据流: action1(side function) —> redux-thunk监听 —> 执行相应的有副作用的方法 —> action2(plain object)

> redux-saga 数据流: action1(plain object) —> redux-saga监听 —> 执行相应的Effect方法 —> 返回描述对象 —> 恢复执行异步和副作用函数 —> action2(plain object)

安装

1
2
$ npm install --save redux-saga
$ yarn add redux-saga

api

  • take: 监听 action, 返回的是监听到的 action 对象
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    const loginAction = {
    type:'login'
    }
    // 在 UI Component 中 dispatch 一个 action
    dispatch(loginAction)
    // 在 saga 中使用
    const action = yield take('login');
    // 可以监听 UI 传递到中间件的 action, 上述 take 方法的返回, 就是 dispatch 的原始对象, 一旦监听到 login 动作, 返回的 action 为:
    {
    type: 'login'
    }
  • call: call 方法调用 fn (可以是普通函数, 也可以是 generator), 参数为 args, 返回一个描述对象; 通常用来实现异步请求
    1
    call(fn, ...args)
  • put: 和 redux 的 dispatch 相似, 都是发出 action, 且发出的 action 都会被 reducer 监听到
    1
    yield put({type: 'login'})
  • all: