Redux中间件redux-thunk

已于 2022-10-31 13:32:34 修改
阅读量497 收藏
点赞数 1
CC 4.0 BY-SA版权
文章标签： react.js 前端 javascript
于 2022-10-30 22:42:58 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/VVVVV16/article/details/127606330
博客主要介绍了Redux中action和actionCreator的概念，指出reducer无法处理异步情况，需用中间件解决，以redux-thunk为例，阐述其使用方法，包括优化重复请求、配置中间件等，还提及在函数式组件中使用Redux store数据的操作。

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

在redux中,action仅仅是携带了数据的普通js对象,actionCreator返回值是这个action类型的对象.

然后通过store.dispatch()进行分发,同步的情况下一切就都很完美,但是reducer无法处理异步的情况

这时候  我们就需要中间件middleware 来解决

//这里先介绍一个redux-thunk

 我们现在有这样的一个需求

cinema和search  都需要请求后台的数据  这个数据还一样

`重复请求 不太好

我们优化一下  谁先取到  就先存起来   之后 就不用再发送请求

我们定好reducer

 再定义actionCreator

actionCreator在这里是按照配定好中间件的情况下写的

这是个异步的请求  请求的结果 最终会是一个dispatch的对象    

(这里面的dispatch参数可以更改成别的名字,这样写只是为了清除 中间件到底塞到这个异步的actionCreator  中  什么东西)

我们在cinema组件页面中导入actionCreator

 然后 在组件被创建的时候  判断一下   是不是要请求数据

(如果redux的store中 这个list 没有数据   我们就将上面actionCreator的返回对象值  dispatch出去  进行 list的缓存)

之后我们在redux的store.js中配置中间件

先导入  安装好的redux-thunk的包

 使用applyMiddleware()挂载中间件

 这样就完成了   如果没有这个store.js文件中的这两个配置  上面在actionCreator和cinema组件中的配置 就执行不了  而且会报错

以上就是redux-thunk中间件的完整使用

如果我们想在 cinema组件中 使用我们的redux的store中的数据  (在函数式组件中)

 使用useState

 并在useEffect中订阅 并 设置状态

记着在cinema组件销毁的  取消订阅  以避免重复订阅  都是在useEffect中完成

直接jsx使用就行

湖边看客
关注
Redux中间件redux-thunk和redux-saga的具体区别是什么？
祈澈菇凉
02-18 520
简单直接，适合处理基础的异步请求，使用方便，适合中小型应用。redux-saga：功能强大，适合处理复杂的异步逻辑和副作用，特别是在需要高可测试性和可维护性的场景中。
React ( redux 的使用流程及简单的案例 ,redux的数据划分使用,以及react-redux,react-thunk的使用)
lllllllwj的博客
05-16 898
redux redux基础 redux中数据的划分（ reducer 划分） redux中的中间件 组成部分 store 数据的管理者 view react的组件来充当 actionsCreators 动作的创建者， 用来发送一个 action ❥(^_-) reducer 动作的触发者， 用来修改数据的 ，reducer是一个纯函数，它里面有一个返...
redux中间件之redux-thunk的具体使用
12-02
redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。 1.概念 dispatch一个action之后，到达reducer之前，进行一些额外的操作，就需要用到middleware。你可以利用 Redux middleware 来进行日志记录、创建崩溃报告、调用异步接口或者路由等等。 换言之，中间件都是对store.dispatch()的增强 2.中间件
redux中间件-redux-thunk
qq_54998648的博客
02-12 313
redux-thunk的介绍和使用
redux中间件之redux-thunk
weixin_34245169的博客
04-16 200
redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。 1.概念 dispatch一个action之后，到达reducer之前，进行一些额外的操作，就需要用到m...
Redux中间件——Redux-thunk
lxk116688的博客
12-19 1219
Redux-thunk是作为redux的middleware存在的，thunk是函数编程界的一个专有名词，主要用于，也就是延迟计算。//内部返回的函数就叫thunk return function thunk() {console . log('thunk running,arg:' , arg) } } //我们通过调用wrapper来获得thunk const thunk = wrapper('warpper arg') //然后在需要的地方再去执行thunk thunk()
Redux-thunk中间件
weixin_45621877的博客
08-24 194
安装 npm install --save redux-thunk 在stroe/index.js中配置 配置之前 用的 redux_devtools import {createStore} from 'redux' import reducer from './reducer' //createStore生成store 接受另外一个函数 返回一个新的store对象 const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION__ &&
Redux Thunk:用于Redux的Thunk中间件-开源
04-26
Redux Thunk是Redux的Thunk中间件。 使用基本的Redux，只能通过分派操作来完成简单的同步更新。 通过添加中间件，可以扩展Redux存储的功能，从而使您能够编写与存储交互的异步逻辑。 thunk是包装表达式以延迟其求值...
redux-thunk-3.0.0-beta.0.zip
最新发布
08-31
Redux 的 Thunk 中间件。它允许编写带有内部逻辑的函数，这些函数可以与 Redux 存储的 dispatch 和 getState 方法交互。
redux的中间件之redux-thunk
go
06-17 459
是一个 的中间件，解决异步。主要功能 一个函数，而不是 object，会带来很大的灵活性。
react-redux-thunk:一个简单的使用thunk的例子
05-08
Create React App入门 该项目是通过引导的。 可用脚本 在项目目录中，可以运行： npm start 在开发模式下运行应用程序。 打开在浏览器中查看它。 如果您进行编辑，则页面将重新加载。 您还将在控制台中看到任何棉绒错误。 npm test 在交互式监视模式下启动测试运行器。 有关更多信息，请参见关于的部分。 npm run build 构建生产到应用程序build文件夹。 它在生产模式下正确捆绑了React，并优化了构建以获得最佳性能。 生成被最小化，并且文件名包括哈希值。 您的应用已准备好进行部署！ 有关更多信息，请参见关于的部分。 npm run eject 注意：这是单向操作。 eject ，您将无法返回！ 如果您对构建工具和配置选择不满意，则可以随时eject 。 此命令将从项目中删除单个构建依赖项。 相反，它将所有配置文件和传递依赖项（webp
redux-thunk中间件笔记
react打断点调试
07-07 1485
redux-thunk的作用：1.用于封装和加强dispatch，其用法如下：   a.引入redux-thunk               import {createStore,applyMiddleware} from 'redux'    b.使用以下代码一次性检测dispatch的前、后等状态2.用于异步操作，其用法和步骤如下： a.引入redux-thunk             ...
Redux异步解决方案 1. Redux-Thunk中间件
Mr_Roki的博客
05-24 262
简单介绍一下`thunk`，这是一个中间件，是解决`redux`异步问题产生的。我们都知道，在使用`redux`的时候，通过`dispatch`一个`action` 发生到`reducer` 然后传递给`store`修改状态 一系列都是同步的，那如果说我`dispatch`一个`action` 这个`action`帮我请求一下接口数据，你发现接口请求是异步的，没有办法等接口数据返回再传递给`reducer` 这个时候中间件就产生啦。 `redux`比较常用的中间件有 `redux-saga`、`redux-
关于redux-thunk中间件的使用
sinat_39648402的博客
11-06 255
安装 ： npm install redux-thunk --save reducers中的所有操作都是同步的并且是纯粹的，reducer都是纯函数， 纯函数是指一个函数的返回结果只依赖于它的参数，并且在执行的过程中不会对外部产生副作用 在实际开发应用中，我们希望做一些异步（如Ajax请求）且不纯粹的操作（如改变外部的状态） 这时候就要用到中间件的方式来实现 在index中 中...
Redux中间件之redux-thunk使用详解
qq_37942845的博客
09-23 771
Redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。 1.概念 dispatch一个action之后，到达reducer之前，进行一些额外的操作，就需要...
React 18 仿携程项目【二十二】redux-thunk中间件实现异步action
2301_76510083的博客
05-10 197
redux-thunk中间件实现异步action
Redux中间件及中间件的执行原理（redux-thunk）
Liberal_w的博客
07-01 466
附上原文版权声明：转载请附上原文出处链接。 附上原文链接：https://blog.csdn.net/p445098355/article/details/105218217 一、Redux-thunk中间件 1.第一步安装redux-thunk中间件 npm install redux-thunk 2.再store中引入thunk组件 import {createStore,applyMiddleware } from '...
Redux 中文文档
大灰狼的小绵羊哥哥的博客
12-23 2615
Redux 中文文档 http://www.redux.org.cn/ http://cn.redux.js.org/
ember-redux-thunk-shim：Ember与redux-thunk的过渡解决方案
标题知识点：ember-redux-thunk-shim 是一个用于 Ember.js 应用程序的垫片（shim），它允许使用 redux-thunk 中间件。垫片是指一段代码或软件组件，用于填补两个不同系统间的差异，使得它们能够协同工作。 描述知识...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值