Redux 异步解决方案2. Redux-Saga中间件
时间:2022-07-22
本文章向大家介绍Redux 异步解决方案2. Redux-Saga中间件,主要内容包括其使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
利用Generator特性实现异步
因为Generator。结合yield yield操作符会获取右边表达示的值返回 可以用于异步变同步操作 中间件的特性: 以前的 action -> reducers -> store 现在的 action -> middleware -> reducers -> store
注意:
reducer的type 不能和generator的名字一样。否则会出现惊喜
call generator 只能接受到返回值
redux-saga初使用
安装: yarn add redux-saga
- store.js
import { createStore, combineReducers, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import createSagaMiddleware from 'redux-saga'; // 导入创建saga的函数
import {add, deleter} from './Reducers/TodoList';
import {watch} from './Saga/saga';
// 返回一个saga中间件
const sagaMiddleware = createSagaMiddleware();
export default createStore(
combineReducers({add, deleter}),
applyMiddleware(sagaMiddleware)
);
// saga进行监听 传入的必须是一个generator
sagaMiddleware.run(watch);
- Saga/saga.js
import {
call, // 调用一个函数
put,
take,
select, // 查询store的状态
takeEvery // 对action进行监听
} from 'redux-saga/effects';
export function* fetchData() {
// 利用generator + yield 同步进行数据处理
const data = yield fetch("http://jsonplaceholder.typicode.com/posts")
const res = yield data.json();
// put这个函数相当于正常的dispatch分发一个action给reducer
yield put({
type: 'getList',
payload: res
})
}
// 对dispatch过来的action 进行监听 如果监听到的action type等 takeEvery的第一个参数则触发 fetchData这个函数
export function* watch() {
yield takeEvery('fetchData', fetchData);
}
正常使用dispatch分发action
sagaClick = () => {
this.props.dispatch({
type: 'fetchData'
});
};
首先 dispatch -> action 如果type是saga监听的那个type 则运行流程为: dispatch -> action -> watch -> fetchData -> reducer -> store
如果没有和saga的type对应上 会自己分发到reducer,和以前流程保持不变
实现效果 点击sagaClick获取数据 展示到页面上:
- saga常用API
- takeEvery("actionType", generator). 解释: 监听actionType 将action分发给generator 可以传递一个通配符*监听所有的action
- takeLatest("actionType", generator) 解释: 类似防抖 只会有一个任务 会自动取消前一个任务
- take 解释: take函数可以理解成为监听未来的action 告诉middleware等待第一个action Generator会暂停 直到action匹配成功 才会执行之后的语句 也就是说take是一个阻塞的effect
- fork 解释: fork和call函数类似 但是fork是非阻塞函数 不会等待执行
- put 解释: put函数相当于redux的dispatch 当put一个action后。reducer中就会计算新的state并返回 注意: put也是阻塞effect
- call 解释: call函数 调用其他函数 调用的函数可以是Generator 或者是返回一个promise的简单函数 call函数页数阻塞effect
- select 解释: select函数是用来指示middleware调用提供的选择器获取Store上的state 类似于redux: store.getState(). yield select(state => state.getTodoList.list) 可以通过函数返回值更改值
- all 解释: yield all([call(1), call(2)]) 相当于promise.all
- race 解释: yield race({post: call(1), timeout: call(2)}) 谁先返回谁先有值
- cancel 解释: fork产生的任务 可以使用cancel取消任务
本文为作者原创,手码不易,允许转载,转载后请以链接形式说明文章出处。
- ofbiz实体引擎(八) 创建表
- ofbiz实体引擎(七) 检查数据源
- ofbiz实体引擎(六) GenericHelper的初始化创建
- ofbiz实体引擎(五) ModelGroupReader
- HBitcoin:C#高级比特币钱包库 - 保护您的财产安全
- ofbiz实体引擎(四) ModelReader的作用
- ofbiz实体引擎(三) GenericDelegator实例化的具体过程
- 机器学习实战 | 第五章:模型保存(持久化)
- Python编程任务 | 斯坦福CS231n-深度学习与计算机视觉课程
- ofbiz实体引擎(二) delegator实例化具体方式
- ofbiz实体引擎(一) 获取Delegator
- 12个非常实用的JavaScript小技巧
- 关于PHP浮点数精度损失问题
- FreeMarker与JSP 2.0 + JSTL组合进行比较
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- LeetCode117|最小的k个数
- LeetCode116|移除元素
- LeetCode126|二叉树的后续遍历
- LeetCode125|二叉树的前序遍历
- LeetCode124|二叉树的中序遍历
- LeetCode123|二叉搜索树中第K小的元素
- LeetCode122|删除排序链表中的重复元素II
- LeetCode121|单值二叉树
- LeetCode120|二维数组中的查找
- LeetCode129|不用加减乘除做加法
- LeetCode128|二叉树的最大深度
- LeetCode127|检查平衡性
- 详解Android端与JavaWeb传输加密(DES+RSA)
- Android编程实现下载时主界面与详细界面一致更新的方法
- 详解Android Studio 3.0的新特性与适配