redux-saga 是一个用于管理应用程序副作用（例如异步获取数据，访问浏览器缓存等）的库，它的目标是让副作用管理更容易，执行更高效，测试更简单，在处理故障时更容易。
你可能已经用了 redux-thunk 来处理数据的读取。不同于 redux thunk，你不会再遇到回调地狱了，你可以很容易地测试异步流程并保持你的 action 是干净的。
// action.js
import * as types from './types'
export default {
increment(count) {
return {
type: types.INCREMENT,
payload: count
}
}
}
Reducers 指定了应用状态的变化如何响应 actions 并发送到 store 的，reducer 就是一个纯函数，接收旧的 state 和 action，返回新的 state。现在只需要谨记 reducer 一定要保持纯净。只要传入参数相同，返回计算得到的下一个 state 就一定相同。没有特殊情况、没有副作用，没有 API 请求、没有变量修改，单纯执行计算。
// reducer.js
import * as types from './types'
let initState = { number: 0 }
export default function (
state = initState,
action
) {
switch (action.type) {
case types.INCREMENT:
return {
number: action.payload
}
default:
return state
}
}
// app.js
import React, { Component } from 'react';
import { connect } from 'react-redux'
import action from './store/action'
class App extends Component {
add = () => {
// 异步处理
setTimeout(() => {
let count = this.props.number + 1
this.props.increment(count)
}, 1000);
}
render() {
return (
<>
<div>
{this.props.number}
</div>
<button onClick={this.add}>
点击
</button>
</>
);
}
}
const mapStateToProps = (state) => {
return state
}
export default connect(mapStateToProps, action)(App);
异步都写在组件里面，处理完成组件都可以直接获取，就没有必要把数据写到store里面。如果其他地方也要使用异步修改状态，那么就没法复用，现在使用 redux-saga来解决这个问题。
// sagas.js
import * as types from './types'
import { put, delay, takeEvery } from 'redux-saga/effects'
export function* incrementAsync(action) {
yield delay(1000)
// 使用这个函数去阻塞 Generator
yield put({
type: types.INCREMENT,
payload: action.payload
})
// 然后 dispatch 一个叫 INCREMENT 的 action
}
export function* watchIncrementAsync() {
//用于监听所有的 ASYNC_INCREMENT action
yield takeEvery(
types.ASYNC_INCREMENT,
incrementAsync
)
}
export function* rootSaga() {
yield watchIncrementAsync()
}
takeEvery，用于监听所有的 ASYNC_INCREMENT action，并在 action 被匹配时执行 incrementAsync 任务。incrementAsync Saga 通过 delay(1000) 延迟了 1 秒钟，然后 dispatch 一个叫 INCREMENT 的 action。
// action.js
import * as types from './types'
export default {
increment(count) {
return {
type: types.INCREMENT,
payload: count
}
},
// 添加一个 ASYNC_INCREMENT 类型的 action
asyncIncrement(count) {
return {
type: types.ASYNC_INCREMENT,
payload: count
}
}
}
首先我们引入 ./sagas 模块中的 Saga。然后使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware。我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 sagaMiddleware.run(helloSaga) 运行 Saga。
import { createStore, applyMiddleware } from 'redux'
import reducer from './reducer'
import createSagaMiddleware from 'redux-saga'
import { rootSaga } from './sagas'
const sagaMiddleware = createSagaMiddleware()
let store = applyMiddleware(sagaMiddleware)(createStore)(reducer)
sagaMiddleware.run(rootSaga)
export default store
import React, { Component } from 'react';
import { connect } from 'react-redux'
import action from './store/action'
class App extends Component {
asyncAdd = () => {
// dispatch 一个叫 ASYNC_INCREMENT 的 action，一旦提交会执行 saga 中的 incrementAsync 函数
let count = this.props.number + 1
this.props.asyncIncrement(count)
}
render() {
return (
<>
<div>
{ this.props.number }
</div>
<button onClick={this.asyncAdd}>
点击
</button>
</>
);
}
}
const mapStateToProps = (state) => {
return state
}
export default connect(mapStateToProps, action)(App);
通过把一些异步代码都封装到 saga 里面，这样更好的管理代码，提高了复用效率，比如可以在 saga 里面发送API请求获取数据等等。
