redux-saga
官网:About | Redux-Saga
中文网:自述 · Redux-Saga
redux-saga 是一个用于管理
异步获取数据(副作用)
的redux中间件;它的目标是让副作用管理更容易,执行更高效,测试更简单,处理故障时更容易…学习 redux-saga 之前,需要先掌握 ES6 中的 Iterator迭代器 和 Generator生成器 !!
1. redux-thunk与redux-saga的比较
redux中的数据流
action ———> reducer ———> state
- action是一个纯粹对象(plain object)
- reducer是一个纯函数(和外界没有任何关系)
- 都只能处理同步的操作
redux-thunk中间件的处理流程
action1 ———> middleware ———> action2 ———> reducer ———> state
/* redux-thunk中间件的部分源码 */
'use strict';
function createThunkMiddleware(extraArgument) {
var middleware = function middleware(_ref) {
var dispatch = _ref.dispatch,
getState = _ref.getState;
return function (next) {
return function (action) {
if (typeof action === 'function') {
// 如果返回的action是个函数,则把函数执行「在函数中完成异步操作,用传递的dispatch单独实现派发!!」
return action(dispatch, getState, extraArgument);
}
return next(action);
};
};
};
return middleware;
}
弊端:异步操作分散到每一个action中;而且返回函数中的代码具备多样性!!
redux-saga中间件的工作流程
redux-saga中提供了一系列的api,可以去监听纯粹对象格式的action,方便单元测试!!
action1 ———> redux-saga监听 ———> 执行提供的API方法 ———> 返回描述对象 ———> 执行异步操作 ———> action2 ———> reducer ———> state
这样说完,大家可能是不太理解的,那么接下来,我们去做一个案例,详细解读一下redux-saga的语法和优势!!
常用的中间件
- redux-logger 输出派发日志(开发环境下)
- redux-thunk / redux-promise 实现异步派发
- redux-saga 实现异步派发的 管理的
- redux-persist 实现公共状态持久化存储 [ 实施同步数据到 localStorage中;当页面刷新或者重新打开的时候,会把存储的信息放到 redux 容器中一份 ]
2. redux-saga的基础知识
备注:需要先准备一套基于 “redux、redux-thunk” 实现的投票案例,我们在此基础上去修改 !!
安装中间件
$ npm install redux-saga
$ yarn add redux-saga
使用中间件
store/index.js
- 创建 sagaMiddleware
- 插件中引入 sagaMiddleware
- 启动saga ( 需要创建一个saga文件 )
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import reducer from './reducer';
import saga from './saga';
// saga
const sagaMiddleware = createSagaMiddleware();
// 创建store容器
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
);
// 启动saga
sagaMiddleware.run(saga);
export default store;
saga中间件原理:
saga.js:
import {
take, takeLatest, throttle, debounce,
call, apply, fork, delay, put, select, all, cancel
} from 'redux-saga/effects';
import * as TYPES from './action-types';
/* 工作区域 */
const workingCount = function* workingCount(action) {
yield delay(2000);
yield put({
type: TYPES.DEMO_COUNT,
payload: action.payload
});
};
const workingSupport = function* workingSupport() {
yield delay(1000);
yield put({
type: TYPES.VOTE_SUP
});
};
const workingOppose = function* workingOppose() {
yield delay(1000);
yield put({
type: TYPES.VOTE_OPP
});
};
/* 创建监听器,监听派发的异步任务 */
const saga = function* saga() {
/* while (true) {
let action = yield take(`${TYPES.DEMO_COUNT}@SAGA@`);
yield fork(workingCount, action);
yield fork(workingSupport, action);
yield fork(workingOppose, action);
} */
yield takeLatest(`${TYPES.DEMO_COUNT}@SAGA@`, workingCount);
yield takeLatest(`${TYPES.VOTE_SUP}@SAGA@`, workingSupport);
yield takeLatest(`${TYPES.VOTE_OPP}@SAGA@`, workingOppose);
};
export default saga;
store/action-types.js
export const VOTE_SUP = "VOTE_SUP";
export const VOTE_OPP = "VOTE_OPP";
export const DEMO = "DEMO";
store/reducer
// demoReducer
import * as TYPES from '../action-types';
import _ from '../../assets/utils';
let initial = {
num: 0
};
export default function demoReducer(state = initial, action) {
state = _.clone(state);
let { payload = 1 } = action;
switch (action.type) {
case TYPES.DEMO:
state.num += payload;
break;
default:
}
return state;
};
// index.js
import { combineReducers } from 'redux';
import voteReducer from './voteReducer';
import demoReducer from './demoReducer';
const reducer = combineReducers({
vote: voteReducer,
demo: demoReducer
});
export default reducer;
Demo.jsx组件中
import React from "react";
import { Button } from 'antd';
import { useSelector, useDispatch } from 'react-redux';
const Demo = function Demo() {
const { num } = useSelector(state => state.demo),
dispatch = useDispatch();
return <div>
<span style={{ fontSize: 20, paddingLeft: 10 }}>
{num}
</span>
<br />
<Button type="primary"
onClick={() => {
//基于dispatch进行派发....
}}>
按钮
</Button>
</div>;
};
export default Demo;
saga.js 工作流程
第一部分:创建监听器「基于saga的辅助函数」
take(pattern)
takeEvery(pattern, saga, …args)
takeLatest(pattern, saga, ..args)
throttle(ms, pattern, saga, ..args)
…
第二部分:创建执行函数「基于Effect创建器(API)」
put(action)
call(fn, …args)
fork(fn, …args)
select(selector, …args)
…
每一次组件派发后发生的事情
每一次在组件中,基于dispatch(action)
的时候:
首先会通知 reducer 执行
然后再去通知 saga 中的监听器执行
关于监听器创建的细节
组件中
<Button type="primary"
onClick={() => {
dispatch({
type: "DEMO-SAGA",
payload: 10
});
}}>
按钮
</Button>
saga.js -> take 函数的运用
import * as TYPES from './action-types';
const working = function* working(action) {
// 等价于 dispatch派发:通知reducer执行
yield put({
type: TYPES.DEMO,
payload: action.payload
});
};
export default function* saga() {
/* // 创建监听器,当监听到派发后,才会继续向下执行
// 特征:只能监听一次
// action:可以获取派发时传递的action
let action = yield take("DEMO-SAGA");
yield working(action); */
// 可基于循环,创建无限监听机制
while (true) {
let action = yield take("DEMO-SAGA");
yield working(action);
}
};
saga.js -> 其它监听器辅助函数的运用
const working = function* working(action) {
console.log('AAA');
// 设置延迟函数:等待2000ms后,才会继续向下执行!!
yield delay(2000);
yield put({
type: TYPES.DEMO,
payload: action.payload
});
};
export default function* saga() {
/* // 派发后,立即通知异步的working执行;
// 但是在working没有处理完毕之前,所有其他的派发任务都不在处理!!
while (true) {
let action = yield take("DEMO-SAGA");
yield working(action);
} */
/* // 每一次派发任务都会被执行
yield takeEvery("DEMO-SAGA", working); */
/* // 每一次派发任务都会被执行,但是会把之前没有处理完毕的干掉
yield takeLatest("DEMO-SAGA", working); */
/* // 每一次派发的任务会做节流处理;在频繁触发的操作中,1000ms内,只会处理一次派发任务
yield throttle(1000, "DEMO-SAGA", working); */
/* // 每一次派发的任务会做防抖处理;在频繁触发的操作中,只识别最后一次派发任务进行处理
yield debounce(1000, "DEMO-SAGA", working); */
};
saga.js -> yield call/select…
import * as TYPES from './action-types';
import http from '../api/http';
const working = function* working() {
// 获取目前的公共状态信息
let { num } = yield select(state => state.demo);
// 从服务器获取数据
// let result = yield apply(null, http.get, ['/api/news/latest']);
let result = yield call(http.get, '/api/news/latest');
console.log(result); //从服务器获取的数据
yield put({
type: TYPES.DEMO
});
};
export default function* saga() {
yield takeLatest("DEMO-SAGA", working);
};
saga.js -> yield fork
const query1 = function* query1() {
console.log(1);
yield delay(2000);
};
const query2 = function* query2() {
console.log(2);
yield delay(2000);
};
const working = function* working() {
/* // 串行
yield call(query1);
yield call(query2); */
/* // 并行:无阻塞调用
yield fork(query1);
yield fork(query2); */
console.log(3);
};
export default function* saga() {
yield takeLatest("DEMO-SAGA", working);
};
3. 基于redux-saga重写Vote案例
组件
import { useSelector, useDispatch } from 'react-redux';
import * as TYPES from '../store/action-types';
...
const Vote = function Vote() {
const { supNum, oppNum } = useSelector(state => state.vote),
dispatch = useDispatch();
return <VoteBox>
...
<div className="footer">
<Button type="primary"
onClick={() => {
dispatch({
type: TYPES.VOTE_SUP
});
}}>
支持
</Button>
<Button type="primary"
onClick={() => {
dispatch({
type: "VOTE-SUP-SAGA"
});
}}>
异步支持
</Button>
<Button type="primary" danger
onClick={() => {
dispatch({
type: TYPES.VOTE_OPP
});
}}>
反对
</Button>
<Button type="primary" danger
onClick={() => {
dispatch({
type: "VOTE-OPP-SAGA"
});
}}>
反对异步
</Button>
</div>
</VoteBox>;
};
export default Vote;
saga.js
import { takeLatest, put, delay } from 'redux-saga/effects';
import * as TYPES from './action-types';
const voteSupWorking = function* voteSupWorking() {
yield delay(2000);
yield put({
type: TYPES.VOTE_SUP
});
};
const voteOppWorking = function* voteOppWorking() {
yield delay(2000);
yield put({
type: TYPES.VOTE_OPP
});
};
export default function* saga() {
yield takeLatest("VOTE-SUP-SAGA", voteSupWorking);
yield takeLatest("VOTE-OPP-SAGA", voteOppWorking);
};
redux-saga 常用API总结
1. 在组件中基于dispatch派发的时候,派发的action对象中的type属性「派发的行为标识」,它的命名上需要注意一个细节!! 因为:每一次派发,一定会把reducer执行一遍,再去saga中间中,判断此任务是否被监听... 如果打算进行“同步派发”: 则我们派发的行为标识需要和reducer中做判断的行为标识保持一致!! 并且在saga中,不要再对这个标识进行监听了!! 这样的标识,我们可以在 store/action-types 中进行统一管理!! 如果打算进行“异步派发”: 我们派发的标识,“一定不能”和reducer中做判断的标识一样!! 需要saga中对这个标识进行监听!监听到派发后,进行异步的操作处理!! 我们可以在正常标识的后面加“@SAGA@”「规范:我自己定义的」 当异步操作结束,我们基于 yield put 进行派发的时候,设置的派发标识,要和reducer中做判断的标识一样!! 2. yield take(异步标识):创建监听器,监听派发指定标识的异步任务 + 单纯这样处理,只会被监听一次,我们特殊处理一下 while (true) { let action = yield take(异步标识); yield workingCount(action); } 3. yield takeEvery(异步标识,要执行的方法) + 等价于上述基于while(true)的操作!! + 本身就可以实现一直监听的操作!!被监到后,把传递进来的函数执行!! yield takeEvery(异步标识, workingCount); yield takeLatest(异步标识,working) + 和takeEvery一样,每一次异步派发都会被监测到,都会把working执行 + 只不过,在执行working之前,会把正在运行的操作都结束掉,只保留当前最新的「也就是最后一次」 + 对异步派发任务的防抖处理「结束边界」 yield throttle(ms, 异步标识, working); + 对异步派发进行节流处理:组件中频繁进行派发操作,我们控制一定的触发频率「依然会触发多次,只不过做了降频」 + 它不是对执行的方法做节流,而是对异步任务的监测做节流:第一次异步任务被监测到派发后,下一次监测到,需要过“ms”这么长时间!! yield debounce(ms, 异步标识, working); + 和takeLatest一样,也是做防抖处理「只识别一次」 + 但是原理和takeLatest是不一样的,和throttle类似:它是对异步任务的监测做防抖处理,在指定的“ms”时间内,我们触发多次,任务也只能被监测到一次「监测最后一次」,把working执行一次!! 4. working工作区中使用的EffectsAPI yield delay(ms) 设置延迟操作「和我们之前自己写的delay延迟函数类型」,只有延迟时间到达后,其下面的代码才会继续执行!! yield put(action) 派发任务到reducer,等价于dispatch let { ... } = yield select(mapState) + 基于mapState函数,返回需要使用的公共状态 + yield处理后的结果,就是返回的公共状态,我们可以解构赋值 let { num } = yield select(state => state.demo); let result = yield call(方法, 实参1, 实参2, ...) + 基于call方法,可以把指定的函数执行,把实参一项项的传递给方法 + 真实项目中,我们一般基于call方法,实现从服务器获取数据 + result就是异步调取接口成功,从服务器获取的信息 + ... let result = yield apply(this, 方法, [实参1, 实参2, ...]); yield fork(方法, 实参1, 实参2, ...) + 以 非阻塞调用 的形式执行方法
模拟接口
import {
take, takeEvery, takeLatest, throttle, debounce,
call, apply, fork, delay, put, select, all
} from 'redux-saga/effects';
import * as TYPES from './action-types';
/* 模拟了两个接口 */
const api = {
queryData(id, name) {
return new Promise(resolve => {
setTimeout(() => {
let result = {
code: 0,
data: [10, 20, 30, 40]
};
resolve(result);
}, 2000);
});
},
queryBanner() {
return new Promise(resolve => {
setTimeout(() => {
let result = {
code: 0,
data: '轮播图数据'
};
resolve(result);
}, 1000);
});
}
};
/* 创建执行函数,在任务被监听后,去做异步操作「Generator函数」 */
const workingCount = function* workingCount(action) {
/*
// let { num } = yield select(state => state.demo);
yield delay(2000);
// let { code, data } = yield call(api.queryData, 108, '珠峰');
// let { code, data } = yield apply(null, api.queryData, [108, '珠峰']);
yield put({
type: TYPES.DEMO_COUNT,
payload: action.payload
});
*/
/*
// 基于yield call处理,实现的是标准的串行效果:上一个请求成功,才会发送下一个请求
let { data } = yield call(api.queryData, 100, '珠峰培训');
console.log('第一个请求成功:', data);
let { data: data2 } = yield call(api.queryBanner);
console.log('第二个请求成功:', data2);
*/
/*
// 如果想实现并行效果,则基于yield all处理:等待所有请求都成功,再向下继续执行
let { home, banner } = yield all({
home: call(api.queryData, 100, '珠峰培训'),
banner: call(api.queryBanner)
});
console.log(home, banner); //分别获取了两个请求成功的结果
*/
};
/* 创建监听器,监听派发的任务「Generator函数」 */
const saga = function* saga() {
yield takeLatest(`${TYPES.DEMO_COUNT}@SAGA@`, workingCount);
};
export default saga;
saga
import {
take, takeLatest, throttle, debounce,
call, apply, fork, delay, put, select, all, cancel
} from 'redux-saga/effects';
import * as TYPES from './action-types';
/* 工作区域 */
const workingCount = function* workingCount(action) {
yield delay(2000);
yield put({
type: TYPES.DEMO_COUNT,
payload: action.payload
});
};
const workingSupport = function* workingSupport() {
yield delay(1000);
yield put({
type: TYPES.VOTE_SUP
});
};
const workingOppose = function* workingOppose() {
yield delay(1000);
yield put({
type: TYPES.VOTE_OPP
});
};
/* 创建监听器,监听派发的异步任务 */
const saga = function* saga() {
/* while (true) {
let action = yield take(`${TYPES.DEMO_COUNT}@SAGA@`);
yield fork(workingCount, action);
yield fork(workingSupport, action);
yield fork(workingOppose, action);
} */
yield takeLatest(`${TYPES.DEMO_COUNT}@SAGA@`, workingCount);
yield takeLatest(`${TYPES.VOTE_SUP}@SAGA@`, workingSupport);
yield takeLatest(`${TYPES.VOTE_OPP}@SAGA@`, workingOppose);
};
export default saga;