从 generator 函数 到 redux -saga （四）

最新推荐文章于 2021-01-18 20:38:25 发布
最新推荐文章于 2021-01-18 20:38:25 发布
阅读量434 收藏
点赞数
分类专栏： redux javascript react
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37653449/article/details/85563013
版权

fork 和 takeEvery 

takeEvery 的作用是每次put 动作执行的的时候 都去调用worker 

以下代码可以直接在浏览器运行，执行步骤在代码中做了注释 

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta http-equiv="X-UA-Compatible" content="ie=edge">
	<title>Document</title>
</head>
<body>
	<button id="test">
		Clickme
	</button>
	<div id="result">
	</div>
	<script>
		const $btn = document.querySelector('#test');
		const $result = document.querySelector('#result');
		function channel() {
			let taker;
			
			function take(cb) {
				taker = cb;
			}

			function put(input) {
				if(taker){
				 const tempTaker = taker;
				 taker = null;
最低0.47元/天 解锁文章
RemoteLight
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
react-10（generator函数，redux-saga中间件）
weixin_45626517的博客
10-26 536
redux的另一个中间件。 前置知识点：ES6 generator函数 generator函数 生成器的意思。是普通函数，但是带了一个 * 号 经典形态： function* test(){} function * test(){} function *test(){} 分段使用： generator函数是暂缓执行的，可以分段使用，比如我们调用 function* test(){ console.log(1) } test() //没有任何...
从 generator 函数 到 redux -saga （一）
qq_37653449的博客
12-30 697
Generator 函数是 ES6 提供的一种异步编程解决方案 教程可查看 阮老师所著es6   用例1，对象转可执行的数组 var myIterable = {}; myIterable[Symbol.iterator] = function* () { yield 1; yield 2; yield 3; }; console.log([...myIterable]);...
redux-saga generator嵌套执行的阻塞与非阻塞
hao像飘在外太空的博客
07-19 1025
generator调用generator function*another({ call, put }){ // ... } function*one(params,{ call, put }){ // ... yield another({ call, put }) // ... } 在one中yield另一个generatoranother 1.yiel...
浅析redux-saga实现原理
weixin_34409703的博客
10-13 291
作者简介 joey 蚂蚁金服·数据体验技术团队 项目中一直使用redux-saga来处理异步action的流程。对于effect的实现原理感到很好奇。抽空去研究了一下他的实现。本文不会描述redux-saga的基础API和优点，单纯聊实现原理，欢迎大家在评论区留言讨论。 前言 redux-saga监听action的代码如下： import { takeEvery } from 'redux-s...
从 generator 函数 到 redux -saga （六）
qq_37653449的博客
01-02 339
同时执行多个任务 import { call } from 'redux-saga/effects' // effects 将会同步执行 const [users, repos] = yield [ call(fetch, '/users'), call(fetch, '/repos') ] saga中的超时处理 import { race, call, put } from ...
react-typescript-redux-saga:React Redux Redux-Saga打字稿样板
05-14
在这个项目中，`react-typescript-redux-saga-master`压缩包包含的源代码会展示如何将这些技术结合在一起，构建一个功能完善的Web应用。开发者可以学习如何配置TypeScript环境，如何创建Redux store并使用Redux Saga...
redux-saga 初识和使用
08-27
Redux-Saga 主要依赖于 JavaScript 的 Generator 函数，Generator 允许你暂停和恢复函数执行，这使得在 Saga 中能够以同步的方式编写异步逻辑。Saga 通过创建一系列的 Effect 对象来控制应用的行为，Effect 是一种纯...
react_go：React钩子+ redux-toolkit + redux-saga +故事书+ go
02-06
它提供了一种基于Generator函数的控制流，使得异步逻辑更加可读和可测试。Saga监听特定的Redux动作，然后触发副作用，比如API调用。这使得业务逻辑与组件逻辑分离，提高代码可维护性。 5. **Storybook**： ...
记录一篇关于redux-saga的基本使用过程
12-09
在这里，我们定义了两个generator函数`changeTest2`和`changeTest3`，分别对应`SET_TEST2_ACTION`和`SET_TEST3_ACTION`。当这些action触发时，saga会执行相应的逻辑，如从API获取数据并更新state。`watchChangeTest2...
关于redux-saga中take使用方法详解
11-28
Redux Saga 是 Redux 的一个中间件，它引入了一个新的概念，称为 Saga，用于处理异步操作。在 Redux Saga 中，`take` 是一个重要的 effect，它允许我们监听 Redux 中的特定 action，然后根据这些 action 执行相应的...
react中间件 react-saga
一头向往远方的驴
09-07 7878
redux-saga 出发点跟 redux-thunk 是一样的，为了解决异步操作，把异步的逻辑单独的放到一个saga.js文件里面。 采用的是 generator 函数进行构建的。国内文档。 安装 yarn add redux-saga 使用： 配置入口，一般在 store/index.js 入口文件中进行配置，创建一个hellosaga: import { create...
Redux-Saga源码解析(一) 初始化和take
weixin_33686714的博客
04-10 386
Redux-Saga是目前为止，管理Redux的SideEffect最受欢迎的一个库，其中基于Generator的内部实现更是让人好奇，下面我会从入口开始，一步步剖析这其中神奇的地方。为了节省篇幅，下面代码中的源码部分做了大量精简，只保留主流程的代码。 一. 初始化流程和take方法 修改官方Demo 我们首先从官网fork一份Redux-Saga代码，然后在其中的examples/counter...
redux-saga实现与原理
weixin_34019144的博客
09-30 280
介绍redux-saga使用和常用api介绍的文章很多，但是真正介绍原理的却很少，下面我用自己的思路讲一下redux-saga的执行过程。源码有很多删减，感兴趣的可自行查看。 1.react-saga是什么 redux-saga是用于管理Side Effects（异步操作/副作用）的redux中间件 2.什么是redux中间件 redu...
深入理解React 高阶组件
weixin_33686714的博客
10-21 472
React 中的五种组件形式目前的前端开发主流技术都已经往组件化方向发展了，而每学一种新的框架的时候，最基础的部分一定是学习其组件的编写方式。这就好像学习一门新的编程语言的时候，总是要从hello world开始一样。而在React中，我们常用的组件编写方式又有哪些呢？或者说各种不同的组件又可以分为几类呢？无状态组件无状态组件(Stateless Component)是最基础的组件形式，由于没有状...
react-saga原理探索
luo_qianyu的博客
01-18 1092
redux-saga原理探索 这篇文章是为了取探索saga的异步工作流和effect的处理，探究他的思路和工作原理。 redux的applyMiddleware 从头开始撸 saga是一个redux的中间件，而redux提供了一个applyMiddleware(...middlewares)函数， middleware它提供的是位于 action 被发起之后，到达 reducer 之前的扩展点，可以接收store的dispatch和getState方法，我们来做一个简单的测试去理解redux的中间件。 第
Redux-Saga在React工程架构之的应用实践详解
热门推荐
天外野草技术专栏
01-12 2万+
前言React的作用View层次的前端框架，自然少不了很多中间件（Redux Middleware）做数据处理, 而redux-saga就是其中之一，目前这个中间件在网上的资料还是比较少，估计应用的不是很广泛，但是如果使用得当，将会事半功倍的效果，下面仔细介绍一个这个中间件的具体使用流程和应用场景。redux-saga简介Redux-saga是Redux的一个中间件，主要集中处理react架构中的异
redux-saga的原理
前端精髓
12-22 530
为了运行我们的 Saga，我们需要： 创建一个 Saga middleware 和要运行的 Sagas import { take, put } from '../redux-saga/effects' import * as types from './types' export default function* () { for (let i = 0; i < 3; i++) {...
react全家桶从0到1(react-router4、redux、redux-saga)
weixin_33798152的博客
01-18 1613
本文从零开始，逐步讲解如何用react全家桶搭建一个完整的react项目。文中针对react、webpack、babel、react-route、redux、redux-saga的核心配置会加以讲解，希望通过这个项目，可以系统的了解react技术栈的主要知识，避免搭建一次后面就忘记的情况。代码库：https://github.com/teapot-py/react-demo首先关于主要的npm包版...
redux-thunk和redux-saga区别
最新发布
07-27
redux-thunk和redux-saga是用于处理异步操作的Redux中间件。它们的主要区别在于工作原理和使用方式。 1. redux-thunk： redux-thunk是一个简单的中间件，它允许你在Redux应用中编写异步逻辑。它的基本思想是将异步操作封装在一个函数中，这个函数可以被Redux的dispatch方法调用。这个函数可以返回一个函数，这个函数接受dispatch作为参数，并在异步操作完成后再次调用dispatch。这种方式使得我们可以在Redux的action创建函数中实现异步操作。 2. redux-saga： redux-saga是一个更强大、更灵活的中间件，它使用了ES6的Generator函数来处理异步逻辑。通过使用Generator函数，我们可以编写具有同步代码风格的异步逻辑，而不需要嵌套回调或使用Promise。redux-saga将异步操作抽象为一系列的Effects，这些Effects可以被Saga调用，例如发起一个异步请求或等待一个特定的动作。Saga是一个长时间运行的进程，它可以拦截并处理Redux中的动作。 总结： - redux-thunk比较简单直观，适用于简单的异步场景，但对于复杂的异步流程可能会变得难以管理。 - redux-saga更强大、更灵活，适用于复杂的异步场景，可以处理并发、取消、防抖等复杂的异步逻辑。但它的学习曲线可能会比较陡峭。 选择使用哪个中间件取决于你的项目需求和个人偏好。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值