React中间件的Thunk和Saga区别

于 2023-10-06 17:55:22 发布
阅读量214 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： react.js 中间件 前端 js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/YabClass/article/details/133615926
js 专栏收录该内容
93 篇文章 ¥59.90 ¥99.00
订阅专栏
本文探讨了React中两种常用的中间件——Thunk和Saga，用于处理异步操作和副作用。Thunk中间件简单易懂，适用于简单场景，而Saga提供更强大的控制流程和错误处理，适合复杂异步操作。开发者可根据项目需求选择合适的中间件。

在React应用程序中，中间件是一种用于处理异步操作的技术。Thunk和Saga是两个常用的React中间件，用于管理异步操作和副作用。尽管它们都可以解决异步操作的问题，但它们在实现方式和使用方法上有一些区别。

  1. Thunk中间件
    Thunk是一种简单的中间件，它将异步操作封装在一个函数中，该函数可以被调度和执行。它的主要思想是将异步操作作为一个回调函数传递给一个特殊的函数（也称为Thunk函数），然后由该函数负责执行异步操作并返回结果。

下面是一个使用Thunk中间件的示例：

// 异步操作的Thunk函数
const fetchData = (url) => (dispatch
了解本专栏 订阅专栏 解锁全文
Redux-Saga vs Redux-Thunk
m0_72030584的博客
04-27 919
Redux-Saga vs Redux-Thunk
Redux 异步操作指南：使用 redux-thunk 和 redux-saga
最新发布
笔记、经验、日常分享
04-09 875
Redux 本身是不支持异步操作的，但是可以通过中间件来实现异步任务。最常用的中间件就是 redux-thunk 和 redux-saga。
react-thunk迁到redux-saga,他们的对比
xiaohesong
11-13 2973
thunk-saga背景: 刚开始学习前端以及react.之前粗略的对比了下thunk以及saga.发现thunk与saga总体差不多,对我来说都够用,再考虑到学习成本,我还是选择使用了thunk. 但是使用thunk重构几个模块之后发现登录流程很麻烦,需要promise或者async/wait的支持才可以很好的完成登录流程,我的解决办法是在回调里调用(尝试过async/promis不可以,里面的步
redux-thunk、redux-saga和react-redux使用比较（区别）
叶子树的博客
09-17 1454
redux-thunk 实现思路 redux-saga 实现思路 react-redux 实现思路
React中间件 thunk&saga
qq_23111247的博客
12-27 573
6-4 Redux 使用Redux-thunk中间件进行Ajax请求发送 引入thunk插件后，我们可以在actionCreators内部编写逻辑，处理请求结果。而不只是单纯的返回一个action对象。 thunk的原理，可以在actionCreators里通过返回一个函数，然后就可以在函数里编写某些异步操作了，待异步操作结束，最后通过传入的store.dispatch，发出action通知...
Redux中间件-thunk和saga
Dreamer.
10-29 355
1.Redux-thunk中间件 1.1 安装及配置 Redux-thunk并不在Redux基础组件中，需要进行安装。 npm install --save redux-thunk 在/store/index.js中引入redux-thunck。 1.引入applyMiddleware,如果你要使用中间件，就必须在redux中引入applyMiddleware. import { createStore , applyMiddleware } from 'redux' 2.引入redux-thunk库
REACT-Redux,异步SAGA以及THUNK的小理解
ChanBigBro的博客
03-01 501
天道无情人间有情，2020年的开端作为小白 逆流而上，战在学习上，希望有照一日小白‘’板‘’也能成为菜鸟 对Redux的理解 ： 它是一个仓库，里面存放着初始数据，然后这个数据可以各个组件进行调用，以及在当前组件下进行修改，而不影响到这个初始数据；还有就是单独使用传值，值只是传给了Hoc这个高阶组件，所以它是需要<Com {…this.props} /> 调用组件里面的三个方法，但是...
react-saga和react-thunk
06-28
React-saga和React-thunk都是用于处理异步操作的中间件。 React-thunk是Redux官方推荐的中间件之一，它允许我们在Redux中编写异步操作，使得我们可以在Redux中处理异步操作，而不需要在组件中处理异步操作。Thunk是...
理解react-thunk中间件：异步操作与redux的结合
"本文主要探讨了react-thunk中间件在react和redux应用中的作用和理解，作者假设读者已经具备redux的基础知识。文章首先回顾了redux的工作流程，强调数据的更新通常由用户操作触发action，然后通过Store的dispatch...
Redux-thunk和Redux-saga的入门级使用
叶子树的博客
09-16 257
Redux-thunk的使用 实现思路 在action中设置一个为函数的action，因为thunk中间件可以执行action函数。 本示例的表达的意思： 页面需要获取到接口中的data数据，调用getListDataAction函数。 getListDataAction函数返回的参数不是一个对象，而是一个函数。 这个action派发后，thunk中间件识别后，会执行该函数，在异步获取到数据后，会再派发type为GET_LIST_DATA的action。 store会再次收到一个新的action，在这个a
异步方案选型redux-saga 和 redux-thunk（async/await）
热门推荐
liwusen的博客
03-24 2万+
简要介绍：redux中的action仅支持原始对象（plain object），处理有副作用的action，需要使用中间件。中间件可以在发出action，到reducer函数接受action之间，执行具有副作用的操作。之前一直使用redux-thunk处理异步等副作用操作，在action中处理异步等副作用操作，此时的action是一个函数，以dispatch，getState作为形参，函数体内的部分
入门理解redux-thunk和redux-saga
沐光之辰
05-17 1475
** 如标题所示，接下来要说的就是redux的中间件 ** 那么中间件是什么？首先先说明redux中的 action 和 store 之间是通过 dispatch 这个方法来建立桥梁的，那么中间件要做的就在这个桥梁上搞事情。为什么要在这儿呢？因为所有的用户操作发起的action都是要通过 dispatch 才能到达 store ，相当于千军万马过独木桥，那么我只要在这桥上搞个监控器（如redux-...
redux、react-redux、redux-thunk、redux-saga对比
xiasohuai的博客
05-07 1029
redux redux工作流程示意图 actions 函数形式，返回 action 对象，通常具有type属性。负责指令的生成，页面通过 store.dispatch(action) 向 store 发送数据修改的请求。 reducers 一个纯函数，接收两个参数 (previousState, action) 第一个表示修改之前的 state 的值，action 是上一步页面通过 store.dispatch(action) 向 store 传递的 action。reducers 通过 ac
thunk及saga中间件使用指南大全
qq_39261142的博客
10-21 1187
文章目录Redux中间件加载中间件redux-thunk原理使用action处理redux-saga基础配置异步调用创建Effectsputtakecall 和 fork辅助函数组合器代码设计思路超时自动取消高阶函数封装thunk和saga查看中间件状态redux-loggerredux-devtools Redux中间件 一般使用中间件的原因都是为了处理异步操作（通常是指在action中执行ajax请求） 异步action（因为要保证reducer的纯净，因此不能外调api，所以在action里处理）
react中实现异步请求的方法一，react-thunk
weixin_34409741的博客
03-09 346
写在前面： 在react中，dispatch是同步执行reducers生成新状态的，对于页面的操作没有问题；但是如果点击事件是请求了某个结果，需要等待结果响应后再更新视图呢？应该如何处理？这里就用到了异步请求。react-thunk是解决这一问题的一个方法之一。 1、先看设置跨域的代码，文件名必须为setupProxy.js const proxy = require("ht...
React的thunk中间件
czlj1998的博客
09-25 719
这个返回的函数可以接收 dispatch 和 getState 作为参数，并且可以在函数内部进行异步操作。当使用 Thunk 中间件时，在触发 action 的时候并不会自动触发 reducer，而是先触发这个返回的函数。在这个函数内部，你可以进行异步操作，然后再手动调用 dispatch 来触发 reducer。这个函数接收 dispatch 作为参数，在函数的内部可以进行异步操作，并最终手动调用 dispatch 来触发相应的 reducer。因此，Thunk 中间件提供了一种方便处理异步操作的方式。
React 之 Redux 异步处理——redux-thunk
qq_42941302的博客
02-01 2157
什么是 redux-thunk redux-thunk 是一个中间件，专门用来解决 action 中的异步处理。 redux提供了一个方法 applyMiddleware 用来使用中间件。 redux-thunk 的安装方法：cnpm i redux-thunk -S redux-thunk的规则： 通常情况下，action必须是一个对象，或者返回一个对象； 在使用redux-thunk之后，允许action返回一个函数，函数有个参数dispatch 在需要进行异步处理的时候返回函数
redux / react-redux / redux-thunk 详解
qq_38763173的博客
05-07 698
Redux mini版本redux (没有Action Creators) yarn add redux 基本步骤： 1、建立redux文件夹，建立store.js，引入redux，创建一个store核心对象 如何得到store对象： import {createStore} from 'redux' import countReducer from './count_reducer.js...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值