一步一步教你把 Redux Saga 添加到 React&Redux 程序中
时间紧迫?先克隆 GitHub 仓库代码吧!
git clone --branch redux-saga https://github.com/rajjeet/react-quick-start redux-saga-quick-start
cd redux-saga-quick-start
npm install
npm start
第1步:安装 redux-saga
npm install redux-saga
第2步:导入库
/src/configure-store.js
import { createStore, applyMiddleware } from 'redux';
import createSagaMiddleware from 'redux-saga';
import "regenerator-runtime/runtime";
...
applyMiddleware
是一个辅助函数,为 redux
的 dispatch
函数添加了功能。
默认的 redux-saga
导出(在代码中为 createSagaMiddleware
)是创建中间件实例的工厂。
通过导入 regenerator-runtime/runtime
允许 Babel 进行异步动作的转译,而不会出现任何问题。如果忽略此行,则你的应用会失败,并显示以下错误消息:Uncaught ReferenceError:regeneratorRuntime is not defined
。
第3步:创建根 saga
/src/configure-store.js
function* exampleSaga() {
console.log("Example saga reached");
}
Saga 只是生成器函数。与正常函数不同,生成器可以用 yield
关键字暂停对异步语句的执行。
与根 reducer( createStore
的第一个参数)一样,此 saga 充当一棵树的根,其中每个树节点都将是另一个 saga。这使我们可以将 saga 和 reducers 并置在使用它们的组件附近。这也使它们易于管理,因为它们仅包含与附近文件相关的代码。
在例子中,exampleSaga
只是执行一次并终止的普通函数。我们将在以后的教程中探讨生成器的用法。
第5步:创建 Saga 中间件实例
/src/configure-store.js
const sagaMiddleware = createSagaMiddleware();
执行我们代码中的 redux-saga
默认导入来获取 saga 中间件的实例。
第5步:将 saga 中间件应用到 redux
/src/configure-store.js
export const store = createStore(countReducer, applyMiddleware(sagaMiddleware));
applyMiddleware(sagaMiddleware)
返回 store enhancer。通过使用工具函数 applyMiddleware
,我们可以组合多个中间件并返回一个 store enhancer。 createStore
仅接受单个 store enhancer,因此需要 applyMiddleware
。我们将为多个中间件使用一个中间件数组。
第6步:运行 saga
/src/configure-store.js
sagaMiddleware.run(exampleSaga);
run()
用来接受生成器并在后台运行该进程。通过该过程,我们可以并行创建多个过程并执行许多与 Redux 相关的函数。另外要注意,它必须在应用 saga 中间件之后运行。
Redux-Saga 配置 Store
这是整合 redux-saga
之后我们最终 store 的配置。
/src/configure-store.js
import { createStore, applyMiddleware } from 'redux';
import { countReducer } from './counter/reducer';
import createSagaMiddleware from 'redux-saga';
import "regenerator-runtime/runtime";
function* exampleSaga() {
console.log("Example saga reached");
}
const sagaMiddleware = createSagaMiddleware();
export const store = createStore(countReducer, applyMiddleware(sagaMiddleware));
sagaMiddleware.run(exampleSaga);
这就是在程序中使用 redux-saga
的最低要求, 非常简单。
- Uva----------(11078)Open Credit System
- 学习HTML5之塔克大战(详细记录)
- 学习HTML5之新特性标签一览(详细)
- poj----(1251)Jungle Roads(最小生成树)
- poj-------(2240)Arbitrage(最短路)
- MySQL在线DDL修改表结构的简单经验分享
- HDUOJ-----(1162)Eddy's picture(最小生成树)
- hduoj----1142A Walk Through the Forest(记忆化搜索+最短路)
- java设计之简单的JAVA计算器
- Java之线程———GUI线程(包含打字游戏和计时器俩个GUI实列)
- la----3695 City Game(最大子矩阵)
- poj------(3468)A Simple Problem with Integers(区间更新)
- hdu-------(1698)Just a Hook(线段树区间更新)
- NBitcoin:密码学第2部分
- 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 数组属性和方法
- 如如何基于Docker快速搭建Elasticsearch集群?
- 解决Centos8无法安装docker的问题
- 正则表达式
- Python函数详解一(函数参数、变量作用域)
- Java9改进try-with-resources语法
- 如何用Python实现网页转PDF
- LeetCode 242. 有效的字母异位词
- 再见Excel!最强国产开源在线表格Luckysheet走红GitHub
- 快速学习Python之迭代器和生成器
- js事件冒泡
- Deepin创建应用快捷方式
- SecureCRT下Python脚本编写
- 一篇文章上手Vue3中新增的API
- 先电OpenStack卸载脚本
- 先电OpenStack之neutron-vlan脚本