redux-saga

132 阅读1分钟

redux-saga是react的中间件,主要用来执行代码中的一些副作用。

使用:

1,在redux创建store的时候,要将中间件注入:

const sagaMiddleware = createSagaMiddleware()

// mount it on the Store

const store = createStore(
  reducer,
  applyMiddleware(sagaMiddleware)
)

// then run the saga
sagaMiddleware.run(mySaga)

上述代码是使用redux-saga将saga与redux-store进行连接

2,业务代码中派发含有副作用的action

dispatch({type:"USER_FETCH_REQUESTED"})

3,创建saga拦截器,会拦截对应的拥有副作用的action. 如下:USER_FETCH_REQUESTED类型的action会被mySaga定义的generacor处理。

function* mySaga() {
  const res = yield takeLatest("USER_FETCH_REQUESTED", fetchUser);
  yield put({ type: 'USER_FETCH_REQUESTED', payload:res })
}

export default mySaga;

takeLatest在拥有多个副作用同时执行的时候,会取消之前的任务,只执行最后一个任务。

saga的辅助函数(拦截action)

effect创建器

  • select(selector, ...args)获取redux中的state
  • call(fn,...args)命令middler以参数args调用fn函数。
  • put(action) middler向store发送一个action
  • take(pattern) 阻塞性的匹配发出的action