redux-saga学习笔记

最新推荐文章于 2022-10-14 21:38:10 发布
最新推荐文章于 2022-10-14 21:38:10 发布
阅读量432 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： redux
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/Her_smile/article/details/79604220
本文介绍了Redux Saga中间件的基本概念，包括Generator生成器的使用、yield关键字的作用、takeEvery辅助函数的功能及其应用示例，同时还涵盖了如何通过call进行异步请求及put方法的使用。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1、Generator生成器（用一个*号表示）

2、yield字段  ：何以不操作相关

3、takeEvery是一个辅助函数 可以用来监听action，

[javascript]  view plain  copy
  1. yield* takeEvery('FETCH_REQUESTED', fetchData)  

如这个表示当监听到type为FETCH_REQUESTED时候触发fechData这个函数。

4、call(function,arg2)  这是一个异步请求 ，第一个是需要调用的方法 ，第二个是需要传入action的参数。

5、put({})   相当于dispatch(action)   用于发送一个action

EDB
关注
专栏目录
Redux-Saga在React工程架构之的应用实践详解
天外野草技术专栏
01-12 2万+
前言React的作用View层次的前端框架，自然少不了很多中间件（Redux Middleware）做数据处理, 而redux-saga就是其中之一，目前这个中间件在网上的资料还是比较少，估计应用的不是很广泛，但是如果使用得当，将会事半功倍的效果，下面仔细介绍一个这个中间件的具体使用流程和应用场景。redux-saga简介Redux-saga是Redux的一个中间件，主要集中处理react架构中的异
React 状态管理工具 - Redux 学习笔记
爱玲姐姐的博客
12-28 1131
React 状态管理工具 - Redux 文章出处： 拉 勾 大前端 高薪训练营 1. Redux 核心 1.1 Redux 介绍 JavaScript 状态容器，提供可预测化的状态管理 1.2 Redux 核心概念及流程 Store: 存储状态的容器，JavaScript 对象 View: 视图，HTML页面 Actions: 对象，描述对状态进行怎样的操作 Reducers: 函数，操作状态并返回新的状态 1.3 Redux 使用： 计数器案例 <!DOCTYPE html> <h
彻彻底底教会你使用Redux-saga(包含样例代码)
weixin_34337381的博客
07-10 1590
Redux-saga使用心得总结（包含样例代码）， 本文的原文地址：原文地址 本文的样例代码地址：样例代码地址 ，欢迎star 最近将项目中redux的中间件，从redux-thunk替换成了redux-saga，做个笔记总结一下redux-saga的使用心得，阅读本文需要了解什么是redux，redux中间件的用处是什么？如果弄懂上述两个概念，就可以继续阅读本文。 redux-thunk...
redux-saga 初级学习教程
大灰狼的小绵羊哥哥的博客
12-14 964
redux-saga 初级学习教程 1. 见证 saga 1.1. 聚合异步操作 1.2. 官方初级教程 1.2.1. Hello Sagas 1.2.1.1. 试试异步调用 1.2.2. 一些解释 2. 基本概念 2.1. Saga 辅助函数 2.1.3. 实现 AJAX 的常见操作 2.2. 声明形式的效应接口 (Effects) ...
Redux学习（三）——redux-saga的使用、编写中间件函数、Reducer文件拆分
zep
02-05 1635
一、redux-devtools 我们之前讲过，redux可以方便的让我们对状态进行跟踪和调试，那么如何做到呢？ redux官网为我们提供了redux-devtools的工具； 利用这个工具，我们可以知道每次状态是如何被修改的，修改前后的状态变化等等； 安装该工具需要两步： 第一步：在对应的浏览器中安装相关的插件（比如Chrome浏览器扩展商店中搜索Redux DevTools即可，其他方法可以参考GitHub）； 第二步：在redux中继承devtools的中间件； index.js: imp
Redux学习笔记
01-08
Redux学习笔记  newtwg@qq.com 最后修改2020.02.20 React技术出来好多年了，一直没有好好学习， 近年来做项目一直都在用vue。 这次将要做个基于React-Redux的源码二次开发项目，所以不得不好好学习了。 趁着宅家...
react-redux-tutorial：react-redux-tutorial中文，目录和代码示例
02-19
此外，"React + Redux系列教程（续）"可能会进一步深入到更高级的主题，如Redux Saga（用于处理异步逻辑的另一种中间件）、Redux-Form（用于管理表单状态的库）、以及如何利用Redux DevTools进行调试。这些工具和...
redux-notepad: 用React和Redux打造的笔记应用
理解Redux的中间件概念（如用于异步操作的redux-thunk或redux-saga）也可能对构建更复杂的功能有所帮助。 redux-notepad作为一个小型项目，适合学习和练习React与Redux的组合，也是理解现代JavaScript应用构建流程...
redux-code：针对Udemy的课程的同伴回购
02-28
ReduxCode是针对Udemy平台课程的一个学习资源，主要聚焦于JavaScript相关的技术...压缩包中的"redux-code-master"可能包含了源码示例、练习项目、笔记或其他辅助学习材料，这些都是深入理解和提升Redux技能的宝贵资源。
初级教程 · Redux-Saga
CannyRunnig的专栏
02-23 290
https://redux-saga-in-chinese.js.org/docs/introduction/BeginnerTutorial.html
redux-saga
Night_Emperor的博客
08-23 510
redux-saga   put({type: 'INCREMENT'})的返回值是 plain Javascript 对象 { '@@redux-saga/IO': true, PUT: { channel: null, action: { type: 'INCREMENT' } } } call(delay, 1000)返回值是 plain Javascript 对象 ...
redux-saga入门
weixin_42588966的博客
04-25 251
作用 管理异步代码，把所有的异步代码都放入一个文件中去（mySaga.js） 对比redux-thunk saga更复杂，它提供了更丰富的api（put，takeEvery…） thunk更简单，它只是让你的action支持func类型 原理 action被dispatch后原本只有store能收到，然后store传给reducer，最后在reducer中处理。 配置了redux-saga后，你的...
redux-saga学习
我本可以
03-16 2527
如果redux需要用到 side effect 异步操作,redux-thunk 和 redux-saga 绝对是目前两个最受欢迎的中间件插件。 redux-saga是一个用于管理redux应用异步操作的中间件，redux-saga通过创建sagas将所有异步操作逻辑收集在一个地方集中处理，可以用来代替redux-thunk中间件。
redux-saga 进阶概念 Using Channels
L472547033的博客
01-16 2199
Using Channels（使用通道） 我们已经了解take和put这两个Effects（效果）去和Redux Store进行通讯，Channels（通道）可以使用这些Effects与外部事件资源或者sagas之间进行通讯，Channels（通道）还可以接收store发送的action，实现action队列。 在这一章节，我们将了解： 如何使用 yield actionCh
React中的redux-saga详解
月光晒了很凉快的博客
10-14 4800
redux-saga 是 redux 一个中间件，它是基于ES6 的Generator功能实现，用于解决异步问题（让redux中可以直接进行异步操作）。组件会发送一个 action 对象给 redux-saga，redux-saga（主saga） 就会分析监听 saga 中有没有当前 action 对应的 type 类型操作，如果在监听 saga 中找到了，说明当前操作是一个异步操作，然后就会走下面的异步操作流程，最后 action 会被交给 redux，也就是交给 reducer 完成修改。
Redux-saga快速解读
拯救世界的光太郎
01-12 1094
首先，对于redux来说，redux-saga就是一个中间件。 其次，redux-saga主要用于处理action中涉及到的一些副作用，来确保reducer始终都是一个纯函数。 常规操作redux中的state，流程是这样的： UI（点击按钮） → dispatch（action）→ reducer（根据action操作state）→ store（合并reducer更新的state）→ UI更新 toLoginIn: (username, password)=>{ dispatch(
中间件redux-saga使用（React）
0.0 的博客
02-13 687
一、下载 yarn add redux-saga npm i redux-saga 二、使用 以计数器为例子来学习 redux-saga 的使用。 通过 redux-saga 实现以下效果： 在计数器中，从输入框中输入一个值，延迟 1 秒后，再通过这个值乘以 2 后再修改仓库中的数据。 1、组件中触发事件 <input type="text" onBlur={(e) => { dispatch({ type: 'inputCountAsync',
Redux高级进阶
土蛙的博客
11-09 330
1.Redux中的方法createStore实现原理 const createStore = (reducer) => { let state; let listeners = []; const getState = () => { return state; }; const dispatch = (action) => {
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值