# 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学习心得的更多相关文章

  1. redux saga学习

    来源地址:https://www.youtube.com/watch?v=o3A9EvMspig Saga的基本写法 takeEvery与takeLatest的区别 takeEvery是指响应每一个请 ...

  2. 我的MYSQL学习心得(一) 简单语法

    我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  3. 我的MYSQL学习心得(二) 数据类型宽度

    我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  4. 我的MYSQL学习心得(三) 查看字段长度

    我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...

  5. 我的MYSQL学习心得(四) 数据类型

    我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(五) 运 ...

  6. 我的MYSQL学习心得(五) 运算符

    我的MYSQL学习心得(五) 运算符 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据 ...

  7. 我的MYSQL学习心得(六) 函数

    我的MYSQL学习心得(六) 函数 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  8. 我的MYSQL学习心得(七) 查询

    我的MYSQL学习心得(七) 查询 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

  9. 我的MYSQL学习心得(八) 插入 更新 删除

    我的MYSQL学习心得(八) 插入 更新 删除 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得( ...

  10. 我的MYSQL学习心得(九) 索引

    我的MYSQL学习心得(九) 索引 我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类 ...

随机推荐

  1. Java中HashMap源码分析

    一.HashMap概述 HashMap基于哈希表的Map接口的实现.此实现提供所有可选的映射操作,并允许使用null值和null键.(除了不同步和允许使用null之外,HashMap类与Hashtab ...

  2. linux系统管理--查看进程

    关于进程的查看,大家都不会陌生 ,主要是ps和pstree命令. ps  aux    查看系统中所有进程,使用BSD操作系统格式.(注意:不是ps -aux) 执行结果 USER :该进程是由哪个用 ...

  3. 瀑布流布局使用详解——JQuery插件Isotope(动态实现子项目筛选)

    瀑布流布局,听起来听牛逼的样子,其实就是简单的子元素筛选功能.不过这一功能在网站页面布局当中还是很常用的,特别是在电商网站中 经常会有点一个钮筛选,然后页面的子元素刷的以下变了样.接下来,我们先简单介 ...

  4. 取代netcat

    前言 众所周知,netcat是网络界的瑞士军刀,它的主要作用是:提供连接其他终端的方法,可以上传文件,反弹shell等等各种利于别人控制你电脑的操作.所以聪明的系统管理员会将它从系统中移除,这样当别人 ...

  5. EntityFramework6.X 之LocalDB&ConnectionString

    LocalDB 面向开发人员的SQL Server Express的执行模式,它的安装将复制启动SQL Server数据库引擎所需的最少文件集且使用特定连接字符串来启动连接,它是可以创建和打开SQL ...

  6. springboot 集成elasticsearh的简单配置

    添加依赖 gradle compile("org.springframework.boot:spring-boot-starter-data-elasticsearch:${springBo ...

  7. OpenGL教程(2)——第一个窗口

    OpenGL环境终于配置好了,现在我们可以开始学习OpenGL了. 首先,创建一个.cpp文件,然后打上几行#include指令: #include <iostream> using st ...

  8. NOSQL基础概念

    NoSql是一个很老的概念了,但对自己来说,仍然是一个短板,果断补上. 首先通过几个简单的例子来了解NOSQL在国内的情况(2013年左右的数据,有些过时),比如新浪微博,其就有200多台物理机运行着 ...

  9. 【JAVAEE学习笔记】hibernate04:查询种类、HQL、Criteria、查询优化和练习为客户列表增加查询条件

    一.查询种类 1.oid查询-get 2.对象属性导航查询 3.HQL 4.Criteria 5.原生SQL 二.查询-HQL语法 //学习HQL语法 public class Demo { //基本 ...

  10. 深入探索C++对象模型(五)

    构造.解构.拷贝语意学(Semantics of Construction,Destruction, and Copy) 一般而言,class的data member应该被初始化,并且只在constr ...