介绍

  1. 在redux中更好的解决异步操作
  2. redux-saga相当于在redux原来的数据流中多了一层,对action进行监听
  3. 接收到action时,派发一个任务维护state
  4. saga通过Generator方式创建,异步方法同步化

正常redux流程

加入redux-saga之后的流程


使用方式

import { createStore, applyMiddleware } from 'redux'
import createSagaMiddleware from 'redux-saga'
//引入saga文件
import { rootSaga } from './rootSaga'
//使用 redux-saga 模块的 createSagaMiddleware 工厂函数来创建一个 Saga middleware。
//运行 rootSaga 之前,我们必须使用 applyMiddleware 将 middleware 连接至 Store。然后使用 const sagaMiddleware = createSagaMiddleware();
const middlewares = [ sagaMiddleware ]; const store = createStore(rootReducer, applyMiddleware(...middlewares));
sagaMiddleware.run(rootSaga);
复制代码

redux-saga 辅助函数

sage提供了一些辅助函数,包装了一些内部方法,用来在一些特定的action被发起到store时派生任务

takeEvery

import { call, put } from 'redux-saga/effects'
export function* fetchData(action) {
try {
const data = yield call(Api.fetchUser, action.payload.url);
yield put({type: "FETCH_SUCCEEDED", data});
} catch (error) {
yield put({type: "FETCH_FAILED", error});
}
} function* watchFetchData() {
yield* takeEvery('FETCH_REQUESTED', fetchData)
} //有一种用法:监控所有的发起的action
yield takeEvery('*', fn)
复制代码

takeEvery 允许多个 fetchData 实例同时启动, 在某个特定时刻, 尽管之前还有一个或多个fetchData尚未结束, 我们还是可以启动一个新的fetchData任务-->意思就是只用调用了 FETCH_REQUESTED action的时候就会启动 fetchData 任务.

takeLatest

function* watchFetchData() {
yield* takeLatest('FETCH_REQUESTED', fetchData)
}
复制代码

在任何时刻 takeLatest只允许一个 fetchData 任务在执行,并且这个任务是最后被启动的那个,如果之前有一个任务再启动的时候执行了fetchData , 那么之前的任务会被自动取消 -- 可以获得最后一次(最新)调用FETCH_REQUESTED action 得到的结果.


Effects

概念

sagas都是Generator函数实现,可以用yield 对 js 对象来表达saga的逻辑,这些对象就是effect,

  1. sagas都是用Generator函数实现的
  2. 在 Generator 函数中,yield 右边的任何表达式都会被求值,结果会被 yield 给调用者
  3. 用yield对Effect(简单对象),进行解释执行
  4. Effect 是一个简单的对象,这个对象包含了一些给 middleware 解释执行的信息。 你可以把 Effect 看作是发送给 middleware 的指令以执行某些操作(调用某些异步函数,发起一个 action 到 store,等等)
//官方例子
import { takeEvery } from 'redux-saga/effects'
import Api from './path/to/api' //监听如果有一个调用PRODUCTS_REQUESTED 的action的话,就会匹配到第二个参数所代表的effect
function* watchFetchProducts() {
yield takeEvery('PRODUCTS_REQUESTED', fetchProducts)
}
//执行,获取数据
//使用Generator 调用了Api.fetch,在Generator函数中,yield右面的任何表达式都会被求值,结果会被yield给调用者
function* fetchProducts() {
const products = yield Api.fetch('/products')
console.log(products)
} //第二种方式
import { call } from 'redux-saga/effects'
//call(fn, ...args) 这个函数。与前面的例子不同的是,现在我们不立即执行异步调用,相反,call
//创建了一条描述结果的信息就像在 Redux 里你使用 action 创建器,创建一个将被 Store 执行的、描述 action 的纯文本对象。
//call 创建一个纯文本对象描述函数调用。redux-saga middleware 确保执行函数调用并在响应被 resolve 时恢复 generator
function* fetchProducts() {
const products = yield call(Api.fetch, '/products')
// ...
} 复制代码

发送action到store

//这种方式是Generator获取到了返回值,在调用dispatch
function* fetchProducts(dispatch)
const products = yield call(Api.fetch, '/products')
dispatch({ type: 'PRODUCTS_RECEIVED', products })
} 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 })
}
复制代码

错误处理


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 })
}
} 复制代码

使用 try/catch 的方式捕获saga的错误信息


一些概念

从 Saga 内触发异步操作(Side Effect)总是由 yield 一些声明式的 Effect 来完成的 , 一个 Saga 所做的实际上是组合那些所有的 Effect,共同实现所需的控制流。使用上是用yield Effects的方式来完成,Effect包括

  1. call: yield call(Generator, param) yield一个call,命令middleware以参数param调用函数 到Generator,saga等待Generator执行之后,接收返回值继续执行,call是堵塞的,就是等待执行完再继续执行,返回的是执行完正常返回的结果.
  2. take: 是阻塞的,只有监听到他(action.type),才会继续往下执行.也就是说创建一个effect的描述信息,用来命令middleware在Store上等待指定action,在发起与他相匹配的action之前,Generator将暂停.
  3. put: 类似dispatch方法,触发一个action,用来命令middleware向Store发起一个action请求,而且是非阻塞的
  4. fork: 非阻塞的,遇到它不需要等待他执行完毕,就可以继续往下执行,fork返回的是一个任务,可以被取消
  5. cancel: 针对fork方法返回的任务,进行取消
  6. select: 可以从全局state中获取状态
  7. saga: 就是用* 注册的函数,一个函数就是一个saga
  8. effect: 上面的call,put,take...就是effect
function* watchAndLog() {
while (true) {
const action = yield take('*')
const state = yield select()
}
}
take,它将会暂停 Generator 直到一个匹配的 action 被发起了,watchAndLog 处于暂停状态,直到任意的一个 action 被发起。 复制代码

无阻塞调用-fork

fork一个任务,任务会在后台启动,调用者也可以继续它的流程,而不用等待被fork的任务执行结束 当我们需要有并发操作的时候,使用call effect会阻塞saga的执行,使用fork就需要关心被阻塞,或者等待结果返回在继续执行

const result = yield fork (saga,param)
复制代码

同时执行多个任务

const [users, repos] = yield [
call(fetch, '/users'),
call(fetch, '/repos')
]
复制代码

当需要同步执行多个任务,需要把yield一个包含了effect的数组,Generator将会阻塞,等所有的effect都执行完毕


使用

//redux.connect所需要绑定到props上的action
function mapDispatchToProps(dispatch) {
return {
getHome: bindActionCreators(getHomeAdData, dispatch)
}
}
//一个 action creator
export function getHomeAdData(){
return {
type: actionTypes.HOME_AD_DATA,
}
}
//监听action.type,然后出发后面的action
export default function* rootSaga () {
// 就在这个rootSaga里面利用takeEvery去监听action的type
yield takeEvery('HOME_AD_DATA', getHomeAdData);
yield takeEvery('GET_LIKE_LIST_DATA', getLikeListData);
}
//通过yield call Effect 获取返回值,继续下面操作
export function* getHomeAdData() {
let data = yield call(getAdData)
...
yield put({type:UPDATE_HOME_AD_DATA, data: dataArr})
} export function getAdData() {
const result = axios.get('/api/homead')
return result
}
复制代码
https://juejin.im/post/5b306e6151882574d3249605

Redux-saga-整理的更多相关文章

  1. Redux----Regular的Redux实现整理

      Regular的Redux实现整理 什么问题? 组件的树形结构决定了数据的流向,导致的数据传递黑洞 怎么解决? 所有组件都通过中介者传递共享数据 方案: 中介者: (function create ...

  2. [React] 14 - Redux: Redux Saga

    Ref: Build Real App with React #14: Redux Saga Ref: 聊一聊 redux 异步流之 redux-saga  [入门] Ref: 从redux-thun ...

  3. react系列(六)Redux Saga

    在Redux中常要管理异步操作,目前社区流行的有Redux-Saga.Redux-thunk等.在管理复杂应用时,推荐使用Redux-Saga,它提供了用 generator 书写类同步代码的能力. ...

  4. react native redux saga增加日志功能

    redux-logger地址:https://github.com/evgenyrodionov/redux-logger 目前Reac native项目中已经使用redux功能,异步中间件使用red ...

  5. redux 个人整理

    序 本人工作之余的闲暇时间还是很充裕的.在完成经理安排的任务后,基本上都是在自学,主要是阅读各种技术文档.浏览博客.运行别人写的一些前端demo并观赏与赞叹.在ScorpionJay 同学的带领下,我 ...

  6. redux+saga+reducer

    saga.js这个文件里面的函数实际没有在其他jsx中引用吧?这个文件的作用就是把异步数据拿到,放进reducer,如果jsx想取,需要结合connect来取数据.

  7. redux saga学习

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

  8. [转] How to dispatch a Redux action with a timeout?

    How to dispatch a Redux action with a timeout? Q I have an action that updates notification state of ...

  9. [Full-stack] 状态管理技巧 - Redux

    资源一: In React JS Tutorials, lectures from 9. From: React高级篇(一)从Flux到Redux,react-redux 从Flux到Redux,再到 ...

  10. Redux生态系统

    生态系统 Redux 是一个体小精悍的库,但它相关的内容和 API 都是精挑细选的,足以衍生出丰富的工具集和可扩展的生态系统. 如果需要关于 Redux 所有内容的列表,推荐移步至 Awesome R ...

随机推荐

  1. Python3的sorted

    排序算法 排序也是在程序中经常用到的算法.无论使用冒泡排序还是快速排序,排序的核心是比较两个元素的大小.如果是数字,我们可以直接比较,但如果是字符串或者两个dict呢?直接比较数学上的大小是没有意义的 ...

  2. Android Studio Gradle被墙bug总结

    1 Unknown host 'd29vzk4ow07wi7.cloudfront.net'. You may need to adjust the proxy settings in Gradle ...

  3. AI人脸识别的测试重点

    最常见的 AI应用就是人脸识别,因此这篇文章从人脸识别的架构和核心上,来讲讲测试的重点. 测试之前需要先了解人脸识别的整个流程,红色标识代表的是对应AI架构中的各个阶段 首先是人脸采集. 安装拍照摄像 ...

  4. 关于微信小程序开发环境苹果IOS真机预览报SSL协议错误问题解决方案

                              微信小程序开发环境苹果IOS真机预览报SSL协议错误问题 原文来自:https://blog.csdn.net/qq_27626333/articl ...

  5. 爬虫---Beautiful Soup 通过添加不同的IP请求

    上一篇爬虫写了如何应付反爬的一些策略也简单的举了根据UA的例子,今天写一篇如何根据不同IP进行访问豆瓣网获取排行版 requests添加IP代理 如果使用代理的话可以通过requests中的方法pro ...

  6. 使用gdb添加断点的几种方式

    1. 普通断点 根据代码行数设置断点是最常见的一种方式,在debug程序运行前就可以进行断点的配置.如: (gdb) b src/main.cpp:127 当程序执行到main.cpp文件的第127行 ...

  7. Nginx 初步认识

    序言 Nginx是lgor Sysoev为俄罗斯访问量第二的rambler.ru站点设计开发的.从2004年发布至今,凭借开源的力量,已经接近成熟与完善. Nginx功能丰富,可作为HTTP服务器,也 ...

  8. 201871010133-赵永军《面向对象程序设计(java)》第十四周学习总结

    201871010133-赵永军<面向对象程序设计(java)>第十四周学习总结 项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ ...

  9. Maven仓库与坐标(五)

    一.Maven仓库 存放依赖的一个位置/文件夹/仓库,分为以下几种: 本地仓库 中央仓库 远程仓库 1. 本地仓库 第一次执行maven命令时被创建,maven运行时需要的构件都从本地仓库获取,本地仓 ...

  10. c++中#ifndef ... 与#pragma once的区别

    原文链接:https://www.cnblogs.com/qiang-upc/p/11407364.html (1)C/C++防止头文件被include多次的方法:#ifnde..  及  #prag ...