redux-saga

[zzkkui]

Redux-saga

redux-saga 是一个 redux 中间件。

redux 数据流

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

redux-saga 数据流

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

为什么不是 redux-thunk

thunk 可以接收函数，但是只是执行函数，不关心函数内部是什么，如果函数内部极为复杂（拥有多个异步操作），如果需要为每一个异步操作都如此定义一个action，显然action不易维护。

action不易维护的原因：

• action的形式不统一
• 就是异步操作太为分散，分散在了各个action中

Effect提供的 API

熟悉 Generator 用法理解起来事半功倍 😉

• take
  监听action，返回的是监听到的action对象

const loginAction = {
   type:'login'
}

const action = yield take('login');

redux-saga 可以用 fork 和 call 来调用子 saga

• call(apply)
  有阻塞地调用 saga 或者返回 promise 的函数。

yield call(fetch,'/userInfo',username)

• fork
  无阻塞地调用 saga

yield fork(addItemFlow)

• put
  作用和 redux 中的 dispatch 相同。

yield put({ type: 'CLICK_BTN' });

• select
  作用和 redux thunk 中的 getState 相同，若 saga 中需要使用 redux state 時，可以透過 select 來取用

const id = yield select(state => state.id);

• all
  作用和 Promise.all 效果一样，会等所有 api call 执行完之后才往下继续执行

const [
  course,
  user,
  order,
] = yield all({
  call(api.getCourse, courseId),
  call(api.getUser, userId),
  call(api.getOrder, orderId),
});

辅助函数

• takeEvery
  用来监听action，每一次触发都会执行 action，然后执行处理函数，不受异步流程控制（和take不同）

yield* takeEvery("FETCH_REQUESTED", fetchData)

while(true){
    yield take('FETCH_REQUESTED');
    yield fork(fetchData);
}

• takeLatest
  作用同takeEvery一样，唯一的区别是它只关注最后，也就是最近一次发起的异步请求，如果上次请求还未返回，则会被取消。(类似防抖)