redux-saga学习基础篇一
时间:2019-07-04
本文章向大家介绍redux-saga学习基础篇一,主要包括redux-saga学习基础篇一使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。
一、 基本入门
创建一个 sagas.js 的文件,然后添加以下代码片段:
// sagas.js
export function* helloSaga() {
console.log('Hello Sagas!');
}
为了运行我们的 Saga,我们需要:
- 创建一个 Saga middleware 和要运行的 Sagas(目前我们只有一个 helloSaga)
- 将这个 Saga middleware 连接至 Redux store.
// main.js ...
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
//...
import { helloSaga } from './sagas'
const sagaMiddle = createSagaMidlleware(helloSaga)
const store = createStore(
reducer,
applyMiddleware(sagaMiddle )
)
sagaMiddle.run(helloSaga)
// rest unchanged
运行 helloSaga 之前,我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 sagaMiddleware.run(helloSaga) 运行 Saga。
二、 为了让代码便于测试
import { call } from 'redux-saga/effects'
import Api from '...'
const iterator = fetchProducts()
// expects a call instruction
assert.deepEqual(
iterator.next().value,
call(Api.fetch, '/products'),
"fetchProducts should yield an Effect call(Api.fetch, './products')"
)
这些 声明式调用(declarative calls) 的优势是,我们可以通过简单地遍历 Generator 并在 yield 后的成功的值上面做一个 deepEqual 测试, 就能测试 Saga 中所有的逻辑。这是一个真正的好处,因为复杂的异步操作都不再是黑盒,你可以详细地测试操作逻辑,不管它有多么复杂。
三、call、apply、cps
// Effect -> 调用 Api.fetch 函数并传递 `./products` 作为参数
{
CALL: {
fn: Api.fetch,
args: ['./products']
}
}
call 同样支持调用对象方法,你可以使用以下形式,为调用的函数提供一个 this 上下文:
yield call([obj, obj.method], arg1, arg2, ...)
// 如同 obj.method(arg1, arg2 ...)
apply 提供了另外一种调用的方式:
yield apply(obj, obj.method, [arg1, arg2, ...])
call 和 apply 非常适合返回 Promise 结果的函数。另外一个函数 cps 可以用来处理 Node 风格的函数 (例如,fn(...args, callback) 中的 callback 是 (error, result) => () 这样的形式,cps 表示的是延续传递风格(Continuation Passing Style))。
import { cps } from 'redux-saga'
const content = yield cps(readFile, '/path/to/file')
当然你也可以像测试 call 一样测试它:
import { cps } from 'redux-saga/effects'
const iterator = fetchSaga()
assert.deepEqual(iterator.next().value, cps(readFile, '/path/to/file') )
四、dispatch、put
//... 传统dispatch,不便于测试
function* fetchProducts(dispatch)
const products = yield call(Api.fetch, '/products')
dispatch({ type: 'PRODUCTS_RECEIVED', products })
}
redux-saga 为此提供了另外一个函数 put,这个函数用于创建 dispatch Effect。
import { call, put } from 'redux-saga/effects'
//...
function* fetchProducts() {
const products = yield call(Api.fetch, '/products')
// 创建并 yield 一个 dispatch Effect
yield put({ type: 'PRODUCTS_RECEIVED', products })
}
现在,我们可以像上一节那样轻易地测试 Generator:
import { call, put } from 'redux-saga/effects'
import Api from '...'
const iterator = fetchProducts()
// 期望一个 call 指令
assert.deepEqual(
iterator.next().value,
call(Api.fetch, '/products'),
"fetchProducts should yield an Effect call(Api.fetch, './products')"
)
// 创建一个假的响应对象
const products = {}
// 期望一个 dispatch 指令
assert.deepEqual(
iterator.next(products).value,
put({ type: 'PRODUCTS_RECEIVED', products }),
"fetchProducts should yield an Effect put({ type: 'PRODUCTS_RECEIVED', products })"
)
原文地址:https://www.cnblogs.com/fe-linjin/p/11134653.html
- 从头编写 asp.net core 2.0 web api 基础框架 (1)
- 使用Identity Server 4建立Authorization Server (6) - js(angular5) 客户端
- 如何实现超高并发的无锁缓存?
- 使用Identity Server 4建立Authorization Server (5)
- 多库多事务降低数据不一致概率
- 利用Python实现DGA域名检测
- 一个“爆款”成功的API,都离不开这8条设计准则
- RavenDb学习(八)高级特性上半部分
- 微信钱包中58到家首页为什么这么快
- hbase源码系列(二)HTable 探秘
- hbase源码系列(三)Client如何找到正确的Region Server
- hbase源码系列(五)Trie单词查找树
- 如何在特定的渗透测试中使用正确的Burp扩展插件
- hbase源码系列(十一)Put、Delete在服务端是如何处理?
- 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 数组属性和方法
- 「Mysql索引原理(十五)」维护索引和表-修复损坏的表
- 「Mysql索引原理(十六)」维护索引和表-更新索引统计信息
- 「Mysql索引原理(十七)」维护索引和表-减少索引和数据的碎片
- 「通信框架Netty4 源码解读(一)」起步,关于IO的简单总结,模拟一个redis客户端
- Unet实现文档图像去噪、去水印
- 「influxDB 原理与实践(一)」安装部署,实现基础的添加删除查询功能
- 「influxDB 原理与实践(二)」详解influxDB的写入与查询
- Nginx系列:https配置
- 笛卡尔积、等值连接、自然连接、外连接一文看懂
- nginx系列:常用利用shell统计日志
- Nginx系列:图片过滤处理
- Nginx系列:几款负载均衡第三方插件的安装与使用
- 「高并发通信框架Netty4 源码解读(三)」NIO缓冲区Buffer详解
- UML类图符号:各种关系说明以及举例
- 「高并发通信框架Netty4 源码解读(四)」NIO缓冲区之字节缓冲区ByteBuffer详解