浅析redux-saga中间件及用法

# 一、redux-thunk

# 1.1 redux的副作用处理

redux中的数据流大致是

UI—————>action（plain）—————>reducer——————>state——————>UI

• redux是遵循函数式编程的规则，上述的数据流中，action是一个原始js对象（plain object）且reducer是一个纯函数，对于同步且没有副作用的操作，上述的数据流起到可以管理数据，从而控制视图层更新的目的
• 如果存在副作用函数，那么我们需要首先处理副作用函数，然后生成原始的js对象。如何处理副作用操作，在redux中选择在发出action，到reducer处理函数之间使用中间件处理副作用

redux增加中间件处理副作用后的数据流大致如下：

UI——>action(side function)—>middleware—>action(plain)—>reducer—>state—>UI

在有副作用的action和原始的action之间增加中间件处理，从图中我们也可以看出，中间件的作用就是：

• 转换异步操作，生成原始的action，这样，reducer函数就能处理相应的action，从而改变state，更新UI

# 1.2 redux-thunk源码

在redux中，thunk是redux作者给出的中间件，实现极为简单，10多行代码

function createThunkMiddleware(extraArgument) {
  return ({ dispatch, getState }) => next => action => {
    if (typeof action === 'function') {
      return action(dispatch, getState, extraArgument);
    }

    return next(action);
  };
}

const thunk = createThunkMiddleware();
thunk.withExtraArgument = createThunkMiddleware;

export default thunk;

这几行代码做的事情也很简单，判别action的类型，如果action是函数，就调用这个函数，调用的步骤为

action(dispatch, getState, extraArgument);

• 一、redux-thunk
  • 1.1 redux的副作用处理
  • 1.2 redux-thunk源码
  • 1.3 redux-thunk的缺点
• 二、redux-saga 简介
• 三、redux-saga使用案例
• 四、redux-saga使用细节
  • 4.1 声明式的Effect
  • 4.2 Effect提供的具体方法
    • 4.2.1 take
    • 4.2.2 call(apply)
    • 4.2.3 put
    • 4.2.4 select
    • 4.2.5 fork
    • 4.2.6 takeEvery和takeLatest
• 五、案例分析一
  • 5.1 LoginPanel(登陆页)
  • 5.2 LoginSuccess
• 六、案例分析二
  • 6.1 配置saga信息
  • 6.2 配置reduce
  • 6.3 处理action
  • 6.4 处理sagas
• 七、总结

← 初识MobXvue状态管理之vuex（十六） →