中间件redux-saga使用（React）

一、下载

yarn add redux-saga
npm i redux-saga

二、使用

以计数器为例子来学习 redux-saga 的使用。

通过 redux-saga 实现以下效果：

在计数器中，从输入框中输入一个值，延迟 1 秒后，再通过这个值乘以 2 后再修改仓库中的数据。

1、组件中触发事件

<input type="text" onBlur={(e) => {
        dispatch({
            type: 'inputCountAsync',
            payload: e.target.value
        })
    }}/>

2、创建模块的 saga 文件

1）创建侦听函数

当 takeEvery 的第一个参数，在组件被 dispatch 调用了，就会执行 takeEvery 的第二个参数：

import { takeEvery } from 'redux-saga/effects'

function inputCount() {

}
// 创建一个侦听函数
function* watchCount() {
    // 第一个参数：侦听的 action 的 type 值
    yield takeEvery('inputCountAsync', inputCount)

}
//最后，将侦听函数暴露出去：

export default watchCount;

2）处理 saga 函数（inputCount）

上例中的 inputCount 函数，就是一个 saga 函数，具有以下几个特点：

• 默认第一个参数都是 action 对象，该 action 对象就是组件中 dispatch 传递的 action；
• 在 saga函数中，可以通过 call() 方法去调用异步方法，通过 yield 来接收异步的请求结果；
• 通过 put() 方法来代替dispatch，传递一个 action 对象，最终调用 reducer 修改数据。

function* inputCount(action) { // { type: 'inputCountAsync', payload: 10 }
    // 调用异步方法，发送异步请求，接收异步请求的结果
    const res = yield call(setCountAsync, action.payload);
    // 将异步获取到的结果更新的仓库中去
    yield put({ type: 'inputCount', payload: res});
}

其中，setCountAsync 方法是我们用来模拟异步请求的方法，暂时就直接写在 sagas.js 文件中：

// 这个代码以后是写在 api 中的
function setCountAsync(payload) {
    return new Promise((resolve) => {
        setTimeout(() => {
            // 获取到用户在页面中输入的值，返回一个乘以 2 的新值
            const newCount = payload * 2;
            resolve(newCount)
        }, 1000);
    })
}

3、创建根 saga 文件

我们在 redux 的根目录创建一个 rootSaga.js 文件，在该文件中启动所有模块中的侦听函数：

import { all } from 'redux-saga/effects'
import watchCount from './counter/sagas.js'
function* rootSaga() {
    yield all([watchCount()])
}
export default rootSaga;

4、在 store 中引入中间件

在 store.js 文件引入 saga 中间件，并执行 rootSaga，启动所有侦听函数：

import { createStore, applyMiddleware } from "redux";
// 1、引入 redux-saga 模块，获取到 createSagaMiddleware 方法
import createSagaMiddleware from 'redux-saga'
// 4、引入根 saga 文件
import rootSaga from './rootSaga.js'
// 引入所有合并好的 reducers
import combineReducers from './combineReducers.js'
// 2、调用 createSagaMiddleware 方法，得到 saga 对象
const saga = createSagaMiddleware();

// 将合并好的 reducers 全部添加到 store 中
const store = createStore(
    combineReducers,
    // 3、将 saga 中间件加入到 redux 中
    applyMiddleware(saga)
);
// 5、运行 saga
saga.run(rootSaga)
export default store;