概述

Redux-saga在Redux应用中扮演’中间件’的角色，主要用来执行数据流中的异步操作。主要通过ES6中的generator函数和yield关键字来以同步的方式实现异步操作。

基本用法：

  1. 使用createSagaMiddleware方法创建saga 的Middleware，然后在创建的redux的store时，使用applyMiddleware函数将创建的saga Middleware实例绑定到store上，最后可以调用saga Middleware的run函数来执行某个或者某些Middleware。
  2. 在saga的Middleware中，可以使用takeEvery或者takeLatest等API来监听某个action，当某个action触发后，saga可以使用call、fetch等api发起异步操作，操作完成后使用put函数触发action，同步更新state，从而完成整个State的更新。

API

  1. takeEvery

用来监听action，每个action都触发一次，如果其对应是异步操作的话，每次都发起异步请求，而不论上次的请求是否返回。

1
2
3
4
5
import { takeEvery } from 'redux-saga/effects'
 
function* watchFetchData() {
  yield takeEvery('FETCH_REQUESTED', fetchData)
}

　　

  1. takeLatest

作用同takeEvery一样，唯一的区别是它只关注最后，也就是最近一次发起的异步请求，如果上次请求还未返回，则会被取消。

1
2
3
function* watchFetchData() {
  yield takeLatest('FETCH_REQUESTED', fetchData)
}

　　

  1. call

call用来调用异步函数，将异步函数和函数参数作为call函数的参数传入，返回一个js对象。saga引入他的主要作用是方便测试，同时也能让我们的代码更加规范化。

同js原生的call一样，call函数也可以指定this对象，只要把this对象当第一个参数传入call方法就好了

saga同样提供apply函数，作用同call一样，参数形式同js原生apply方法。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { call } from 'redux-saga/effects'
 
function* fetchProducts() {
  const products = yield call(Api.fetch, '/products')
  // ...
}
 
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')"
)
 
yield call([obj, obj.method], arg1, arg2, ...)
yield apply(obj, obj.method, [arg1, arg2, ...])

　　

  1. cps

同call方法基本一样，但是用处不太一样，call一般用来完成异步操作，cps可以用来完成耗时比较长的io操作等。

  1. put

put是saga对Redux中dispatch方法的一个封装，调用put方法后，saga内部会分发action通知Store更新state。

这个借口主要也是为了方便我们写单元测试提供的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { call, put } from 'redux-saga/effects'
// ...
 
function* fetchProducts() {
  const products = yield call(Api.fetch, '/products')
  // create and yield a dispatch Effect
  yield put({ type: 'PRODUCTS_RECEIVED', products })
}
 
const products = {}
 
// expects a dispatch instruction
assert.deepEqual(
  iterator.next(products).value,
  put({ type: 'PRODUCTS_RECEIVED', products }),
  "fetchProducts should yield an Effect put({ type: 'PRODUCTS_RECEIVED', products })"
)

　　

  1. 请求失败

有两种方式来处理请求失败的情况，一种是使用try-catch方法，将错误抛出；另一种是使用变量缓存成功失败的状态。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
import Api from './path/to/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(error) {
    yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
  }
}
 
 
import Api from './path/to/api'
import { call, put } from 'redux-saga/effects'
 
function fetchProductsApi() {
  return Api.fetch('/products')
    .then(response => ({ response }))
    .catch(error => ({ error }))
}
 
function* fetchProducts() {
  const { response, error } = yield call(fetchProductsApi)
  if (response)
    yield put({ type: 'PRODUCTS_RECEIVED', products: response })
  else
    yield put({ type: 'PRODUCTS_REQUEST_FAILED', error })
}

　　

  1. take

take的表现同takeEvery一样，都是监听某个action，但与takeEvery不同的是，他不是每次action触发的时候都相应，而只是在执行顺序执行到take语句时才会相应action。

当在genetator中使用take语句等待action时，generator被阻塞，等待action被分发，然后继续往下执行。

takeEvery只是监听每个action，然后执行处理函数。对于何时相应action和 如何相应action，takeEvery并没有控制权。

而take则不一样，我们可以在generator函数中决定何时相应一个action，以及一个action被触发后做什么操作。

最大区别：take只有在执行流达到时才会响应对应的action，而takeEvery则一经注册，都会响应action。

1
2
3
4
5
6
7
8
import { take, put } from 'redux-saga/effects'
 
function* watchFirstThreeTodosCreation() {
  for (let i = 0; i < 3; i++) {
    const action = yield take('TODO_CREATED')
  }
  yield put({type: 'SHOW_CONGRATULATION'})
}

　　

  1. fork

非阻塞任务调用机制：上面我们介绍过call可以用来发起异步操作，但是相对于generator函数来说，call操作是阻塞的，只有等promise回来后才能继续执行，而fork是非阻塞的 ，当调用fork启动一个任务时，该任务在后台继续执行，从而使得我们的执行流能继续往下执行而不必一定要等待返回。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
import { take, call, put, cancelled } from 'redux-saga/effects'
import Api from '...'
 
function* authorize(user, password) {
  try {
    const token = yield call(Api.authorize, user, password)
    yield put({type: 'LOGIN_SUCCESS', token})
    yield call(Api.storeItem, {token})
    return token
  } catch(error) {
    yield put({type: 'LOGIN_ERROR', error})
  } finally {
    if (yield cancelled()) {
      // ... put special cancellation handling code here
    }
  }
}

　　

  1. cancel

cancel的作用是用来取消一个还未返回的fork任务。防止fork的任务等待时间太长或者其他逻辑错误。

  • all

　　 all提供了一种并行执行异步请求的方式。之前介绍过执行异步请求的api中，大都是阻塞执行，只有当一个call操作放回后，才能执行下一个call操作， call提供了一种类似Promise中的all操作，可以将多个异步操作作为参数参入all函数中，如果有一个call操作失败或者所有call操作都成功返回，则本次all操作执行完毕。

1
2
3
4
5
6
7
import { all, call } from 'redux-saga/effects'
 
// correct, effects will get executed in parallel
const [users, repos]  = yield all([
  call(fetch, '/users'),
  call(fetch, '/repos')
])

　　

  • race

　　 有时候当我们并行的发起多个异步操作时，我们并不一定需要等待所有操作完成，而只需要有一个操作完成就可以继续执行流。这就是race借口的用处。他可以并行的启动多个异步请求，只要有一个 请求返回（resolved或者reject），race操作接受正常返回的请求，并且将剩余的请求取消。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import { race, take, put } from 'redux-saga/effects'
 
function* backgroundTask() {
  while (true) { ... }
}
 
function* watchStartBackgroundTask() {
  while (true) {
    yield take('START_BACKGROUND_TASK')
    yield race({
      task: call(backgroundTask),
      cancel: take('CANCEL_TASK')
    })
  }
}

　　

  • actionChannel　　

　　在之前的操作中，所有的action分发是顺序的，但是对action的响应是由异步任务来完成，也即是说对action的处理是无序的。
　　如果需要对action的有序处理的话，可以使用actionChannel函数来创建一个action的缓存队列，但一个action的任务流程处理完成后，才可是执行下一个任务流。
　　代码参考：

　　　　

1
2
3
4
5
6
7
8
9
10
11
12
13
14
import { take, actionChannel, call, ... } from 'redux-saga/effects'
 
function* watchRequests() {
  // 1- Create a channel for request actions
  const requestChan = yield actionChannel('REQUEST')
  while (true) {
    // 2- take from the channel
    const {payload} = yield take(requestChan)
    // 3- Note that we're using a blocking call
    yield call(handleRequest, payload)
  }
}
 
function* handleRequest(payload) { ... }
  • 　　eventChannel

  • Throttling

用来防止连续不断的响应某个事件。　　　　

1
2
3
4
5
6
7
8
9
import { throttle } from 'redux-saga/effects'
 
function* handleInput(input) {
  // ...
}
 
function* watchInput() {
  yield throttle(500, 'INPUT_CHANGED', handleInput)
}

　　

  • Debouncing

延时执行，使用delay函数实现

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
import { delay } from 'redux-saga'
 
function* handleInput(input) {
  // debounce by 500ms
  yield call(delay, 500)
  ...
}
 
function* watchInput() {
  let task
  while (true) {
    const { input } = yield take('INPUT_CHANGED')
    if (task) {
      yield cancel(task)
    }
    task = yield fork(handleInput, input)
  }
}
 
 
const delay = (ms) => new Promise(resolve => setTimeout(resolve, ms))

　　参考：https://redux-saga.js.org/docs/api/

Redux-saga学习笔记的更多相关文章

  1. 【原】redux异步操作学习笔记

    摘要: 发觉在学习react的生态链中,react+react-router+webpack+es6+fetch等等这些都基本搞懂的差不多了,可以应用到实战当中,唯独这个redux还不能,学习redu ...

  2. redux saga学习

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

  3. React+Redux学习笔记：React+Redux简易开发步骤

    前言 React+Redux 分为两部分: UI组件:即React组件,也叫用户自定义UI组件,用于渲染DOM 容器组件:即Redux逻辑,处理数据和业务逻辑,支持所有Redux API,参考之前的文 ...

  4. udacity android 学习笔记: lesson 4 part b

    udacity android 学习笔记: lesson 4 part b 作者:干货店打杂的 /titer1 /Archimedes 出处:https://code.csdn.net/titer1 ...

  5. redux-form的学习笔记

    redux是一种常用的与react框架搭配的一种数据流架构,而伴随着redux的出现,也出现了许多基于redux开源的第三方库,而redux-form就是其中之一的开源组件库,到今天我写下这篇笔记为止 ...

  6. The Road to learn React书籍学习笔记(第二章)

    The Road to learn React书籍学习笔记(第二章) 组件的内部状态 组件的内部状态也称为局部状态,允许保存.修改和删除在组件内部的属性,使用ES6类组件可以在构造函数中初始化组件的状 ...

  7. The Road to learn React书籍学习笔记(第三章)

    The Road to learn React书籍学习笔记(第三章) 代码详情 声明周期方法 通过之前的学习,可以了解到ES6 类组件中的生命周期方法 constructor() 和 render() ...

  8. js学习笔记：webpack基础入门（一）

    之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...

  9. PHP-自定义模板-学习笔记

    1.  开始 这几天,看了李炎恢老师的<PHP第二季度视频>中的“章节7:创建TPL自定义模板”,做一个学习笔记,通过绘制架构图.UML类图和思维导图,来对加深理解. 2.  整体架构图 ...

  10. PHP-会员登录与注册例子解析-学习笔记

    1.开始 最近开始学习李炎恢老师的<PHP第二季度视频>中的“章节5:使用OOP注册会员”,做一个学习笔记,通过绘制基本页面流程和UML类图,来对加深理解. 2.基本页面流程 3.通过UM ...

随机推荐

  1. C++之可调用对象

    C++中的可调用对象分为以下几种: 函数 函数指针 lambda表达式 bind创建的对象 重载了函数调用运算符(即“()”)的类 函数.函数指针不再介绍.lambda表达式与bind创建的类参考—— ...

  2. MySQL学习笔记：concat、concat_ws、group_concat —— 字符串连接

    在MySQL中,实现字符串拼接主要有以下3种函数: concat(x,y,...) concat_ws(分隔符,x,y,...) group_concat(distinct xxx order by ...

  3. 定制Eclipse

    转载自http://chriszz.sinaapp.com 一般从Eclipse官网eclipse.org下载的,都是打包好的版本,比如标准版.jee版.java版.c++版.php版.测试版等.有时 ...

  4. html meta标签使用总结（转）

    之前学习前端中,对meta标签的了解仅仅只是这一句. <meta charset="UTF-8"> 但是打开任意的网站,其head标签内都有一列的meta标签.比如我博 ...

  5. HTML5练习1

    制作简历 主要代码: <!doctype html> <html> <head> <meta charset="utf-8"> &l ...

  6. 浏览器开启web通知。

    https://www.cnblogs.com/xcsn/p/7767092.html

  7. centos下安装zabbix

    1. 安装mysql CREATE DATABASE zabbix;GRANT ALL ON zabbix.* TO 'zabbix'@'192.168.19.%' IDENTIFIED BY '12 ...

  8. Bootstrap入门七：按钮

    1.可作为按钮使用的标签或元素 为 <a>.<button> 或 <input> 元素添加按钮类(button class)即可使用 Bootstrap 提供的样式 ...

  9. SpringMVC源码解读 - HandlerMapping - RequestMappingHandlerMapping初始化

    RequestMappingHandlerMapping ,用于注解@Controller,@RequestMapping来定义controller. @Controller @RequestMapp ...

  10. JAVAEE——宜立方商城06：Redis安装、数据类型和持久化方案、Redis集群分析与搭建、实现缓存和同步

    1. 学习计划 1.首页轮播图展示 2.Redis服务器搭建 3.向业务逻辑中添加缓存. 4.使用redis做缓存 5.缓存同步. 2. 首页轮播图动态展示 2.1. 功能分析 根据分类id查询内容列 ...