Redux-Saga

Redux-saga是一个用于管理应用程序Side Effect（副作用， 例如异步获取数据，访问浏览器缓存等）库，目标是让副作用管理更容易，执行更高效，测试更简单，处理故障时更容易。

在reduxs-saga中，sages都是由Generator实现的，从Generator中yield一个纯javascript对象以表达那些Saga逻辑。我们称呼那些对象为Effect。

一个saga就像一个单独的线程，独自负责处理副作用。redux-saga是一个redux中间件，意味着这个线程可以通过正常的redux action从主程序启动，暂停，取消，它能访问完整的redux state，以及dispatch redux action。

Redux-saga使用了ES6的Generator功能，让异步的流程更加易于读取，写入和测试。

简单使用：

class Demo extends React.Component{
  ...
  onSomeButtonClicked() {
    const { userId, dispatch } = this.props
    dispatch({ type: 'USER_FETCH_REQUESTED'， payload: { userId } })
  }
    ...
}

sagas.js

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

// 获取用户数据
function* fetchUser(action) {
  ...
}
function* mySaga() {
  // 允许事件并发，触发获取用户数据事件
  yield takeEvery('USER_FETCH_REQUESTED', fetchUser)
}
export default mySaga

main.js

import { createStore, applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import reducer from '...'
import mySaga from './sagas'

const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const sagaMiddleware = createSagaMiddleware()

const store = createStore(
    reducer,
  composeEnhancers(
    applyMiddleware(sagaMiddleware)
  )
)
sagaMiddleware.run(mySaga)

常用Effect创建器

• take
• put
• call
• apply
• cancel
• join
• getContext
• ...

常见saga辅助函数

• takeEvery
• takeLatest

学习连接

https://redux-saga.js.org