Redux-Saga学习心得
# Redux Saga
## 简述
- Reducers负责处理action的state更新;
- Sagas负责协调那些复杂或异步的操作。
## 安装
npm install --save redux-saga
```
// ...
import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
// ...
import { rootSaga } from './sagas'
const sagaMiddleware = createSagaMiddleware()
const store = createStore(
reducer,
applyMiddleware(sagaMiddleware)
)
sagaMiddleware.run(rootSaga)
const action = type => store.dispatch({type})
```
## 辅助函数
用来在一些特定的action被发起到Store时派生任务。
1. takeEvery
2. put: 用于创建dispatch Effect
3. take: 通过全面控制action观察进程来构建复杂的控制流
4. fork: 无阻塞调用
---
```
yield fetch(url) => yield call(fetch, url)
```
### take
等待dispatch匹配某个action
```
while(true) {
yield take('Click_Action')
yield fork(clickButtonSaga)
}
```
### put
触发某个action,作用和dispatch相同
```
yield put({type: 'CLICK'})
```
```
//具体例子
import { call, put } from 'redux-saga/effects'
export function* fetchData(action) {
try {
const data = yield call(fetch, url)
yield put({type: 'FETCH_SUCCESS', data})
} catch (error) {
yield put({type: 'FETCH_FAILED', error})
}
}
```
### call
有阻塞的调用saga或者返回promise的函数,只在触发某个动作
### takeEvery
循环监听某个触发动作,通常会使用while循环替代
```
import {takeEvery} from 'redux-saga/effects'
function* watchFetchData() {
yield takeEvery('FETCH_REQUESTED', fetchData)
}
```
### takeLatest
对于触发多个action的时候,只执行最后一个,其他的会自动取消
```
import { takeLatest } from 'redux-saga/effects'
function* watchFetchData() {
yield takeLatest('FETCH_REQUESTED', fetchData)
}
```
### fork和cancel
通常fork和cancel配合使用,实现非阻塞任务,take是阻塞状态,也就是实现执行take的时候,无法继续向下执行,fork是非阻塞的,同样可以使用cancel取消一个fork任务
```
function* authorize(user, password) {
try {
const token = yield call(Api.authorize, user, password)
yield put({type: 'LOGIN_SUCCESS', token})
} catch(error) {
yield put({type: 'LOGIN_ERROR', error})
}
}
function* loginFlow() {
while(true) {
const {user, password} = yield take('LOGIN_REQUEST')
yield fork(authorize, user, password)
yield take(['LOGOUT', 'LOGIN_ERROR'])
yield call(Api.clearItem('token'))
}
}
```
当执行yield fork(authorize, user, password),同时执行yield take(['LOGOUT', 'LOGIN_ERROR'])
### 错误处理
我们假设远程数据读取因为某些原因失败了,API函数API.fetch返回一个被拒绝(rejected)的Promise
```
import Api from './Api'
import { call, put } from 'redux-saga/effects'
// ...
function* fetchProducts() {
try {
const products = yield call(Api.fetch, '/products')
yield put({ type: 'PRODUCTS_RECEIVED', products })
} catch (err) {
yield put({ type: 'PRODUCTS_REQUEST_FAILED', err)
}
}
```
### takeEvery的使用
saga中的take并不支持action的循环调用,即遍历数组执行action,为解决该问题,可以使用takeEvery来执行action,此时即可实现遍历数组执行action。
```
import { call, put, takeEvery } from 'redux-saga/effects'
function* fetchUsr(action) {
const payload = action
try {
const user = yield call(api.getUser, payload)
yield put({ type: GET_ENTITIES_USER, user })
} catch (err) {
console.log('err: %o', err)
}
}
function* mySaga() {
//在每个 'GET_USER' action 被发起时调用 fetchUser
//允许并发(译注:即同时处理多个相同的 action)
takeEvery(actions.GET_USER, fecthUser)
}
```
Redux-Saga学习心得的更多相关文章
- redux saga学习
来源地址:https://www.youtube.com/watch?v=o3A9EvMspig Saga的基本写法 takeEvery与takeLatest的区别 takeEvery是指响应每一个请 ...
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(二) 数据类型宽度
我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(三) 查看字段长度
我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(四) 数据类型
我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...
- 我的MYSQL学习心得(五) 运算符
我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...
- 我的MYSQL学习心得(六) 函数
我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(七) 查询
我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
- 我的MYSQL学习心得(八) 插入 更新 删除
我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...
- 我的MYSQL学习心得(九) 索引
我的MYSQL学习心得(九) 索引 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...
随机推荐
- JAVA中的Buffer
一.属性 Buffer有四个基本属性: 1.capacity 容量,buffer能够容纳的最大元素数目,在Buffer创建时设定并不能更改 2.limit buffer中有效位置数目,不能对超过li ...
- struts2总体介绍
这篇博客开始将总结一下有关框架的知识,在开发中合适的利用框架会使我们的开发效率大大提高.当今比较流行的开源框架: 关注数据流程的MVC框架 (Struts1/2, WebWork, Spring MV ...
- MarkDown语法 学习笔记 效果源码对照
MarkDown基本语法学习笔记 Markdown是一种可以使用普通文本编辑器编写的标记语言,通过简单的标记语法,它可以使普通文本内容具有一定的格式. 下面将对Markdown的基本使用做一个介绍 目 ...
- Ionic集成ArcGIS JavaScript API.md
1. Ionic同原生ArcGIS JavaScript API结合 1.1. 安装esri-loader 在工程目录下命令行安装: npm install angular2-esri-loader ...
- Window7 下 WNMP 环境搭建
WNMP 指"Windows 下的 Nginx.MariaDB/MySQL 和 PHP 环境". 下载 Nginx:http://nginx.org/en/download.htm ...
- mysql一库多表查询主键
mysql> show databases; mysql> use information_schema; mysql> show tables; mysql> select ...
- SpringMVC 3.2集成Spring Security 3.2
参考:http://www.cnblogs.com/Beyond-bit/p/springmvc_and_springsecurity.html SpringMVC 3.2集成Spring Secur ...
- 011一对一 唯一外键关联映射_单向(one-to-one)
² 两个对象之间是一对一的关系,如Person-IdCard(人—身份证号) ² 有两种策略可以实现一对一的关联映射 主键关联:即让两个对象具有相同的主键值,以表明它们之间的一一对应的关系:数据库 ...
- XInput和DirectInput
原文链接:https://msdn.microsoft.com/en-us/library/windows/desktop/ee417014(v=vs.85).aspx XInput是一个允许应用从W ...
- 网络编程2之Socket简介和java.net包
一.Socket 通信链路的端点就被称为"套接字"(英文名Socket) 是提供给应用程序的接口 图文说明Socket Socket通信原理 二.java.net包 Java.ne ...