Redux中间件redux-thunk

原创 已于 2022-10-31 13:32:34 修改 · 526 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#react.js #前端 #javascript

于 2022-10-30 22:42:58 首次发布
博客主要介绍了Redux中action和actionCreator的概念，指出reducer无法处理异步情况，需用中间件解决，以redux-thunk为例，阐述其使用方法，包括优化重复请求、配置中间件等，还提及在函数式组件中使用Redux store数据的操作。

在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使用就行

湖边看客
关注
React入门实战：Redux的中间件和异步操作
AI天才研究院
11-13 274
1.背景介绍 随着Web前端技术的不断发展，越来越多的人开始关注其背后的一些理论知识，比如React Redux等。React Redux是一个非常流行的JavaScript状态管理库，用于管理应用的组件状态。它的功能强大、灵活和可扩展性在很大程度上都得益于 Redux 的一些设计理念和架构模式。 Redux 是一种集中式的状态管理方案，
Redux中间件redux-thunk和redux-saga的具体区别是什么？
最新发布
祈澈菇凉
02-18 643
简单直接，适合处理基础的异步请求，使用方便，适合中小型应用。redux-saga：功能强大，适合处理复杂的异步逻辑和副作用，特别是在需要高可测试性和可维护性的场景中。
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.中间件
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中间件-redux-thunk
qq_54998648的博客
02-12 343
redux-thunk的介绍和使用
redux中间件之redux-thunk
weixin_34245169的博客
04-16 222
redux的核心概念其实很简单：将需要修改的state都存入到store里，发起一个action用来描述发生了什么，用reducers描述action如何改变state tree 。创建store的时候需要传入reducer，真正能改变store中数据的是store.dispatch API。 1.概念 dispatch一个action之后，到达reducer之前，进行一些额外的操作，就需要用到m...
Redux 异步操作指南：使用 redux-thunk 和 redux-saga
笔记、经验、日常分享
04-09 874
Redux 本身是不支持异步操作的，但是可以通过中间件来实现异步任务。最常用的中间件就是 redux-thunk 和 redux-saga。
Redux使用中间件radux-thunk与redux-logger
wang_9909的博客
12-01 746
redux默认不支持异步调接口, redux的store如果接收到了一个非action={type,payload}的信号时,会报错. 那该怎么办呢? 使用redux-thunk来解决问题. redux-thunk这个中间件作用是在store收到信号时对"信号"的数据类型进行判断,如果function类型,redux-thunk就调用这个funciton并把dispatch传递这个function,还会拦截掉这个function, 所以这个function就不会抵达reducer.
Redux中间件——Redux-thunk
lxk116688的博客
12-19 1263
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中间件
猫老板的豆
07-02 434
Redux-thunk可以使action可以返回函数，从而在store/actionCreator.js中可以进行异步请求(axios) 安装 npm install redux-thunk 或 yarn add redux-thunk 使用 store/index.js import { createStore, applyMiddleware, compose } from 'redux'; import thunk from 'redux-thunk'; import reducer from '.
redux的中间件之redux-thunk
go
06-17 480
是一个 的中间件，解决异步。主要功能 一个函数，而不是 object，会带来很大的灵活性。
redux-thunk中间件笔记
react打断点调试
07-07 1500
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 349
简单介绍一下`thunk`，这是一个中间件，是解决`redux`异步问题产生的。我们都知道，在使用`redux`的时候，通过`dispatch`一个`action` 发生到`reducer` 然后传递给`store`修改状态 一系列都是同步的，那如果说我`dispatch`一个`action` 这个`action`帮我请求一下接口数据，你发现接口请求是异步的，没有办法等接口数据返回再传递给`reducer` 这个时候中间件就产生啦。 `redux`比较常用的中间件有 `redux-saga`、`redux-
关于redux-thunk中间件的使用
sinat_39648402的博客
11-06 273
安装 ： npm install redux-thunk --save reducers中的所有操作都是同步的并且是纯粹的，reducer都是纯函数， 纯函数是指一个函数的返回结果只依赖于它的参数，并且在执行的过程中不会对外部产生副作用 在实际开发应用中，我们希望做一些异步（如Ajax请求）且不纯粹的操作（如改变外部的状态） 这时候就要用到中间件的方式来实现 在index中 中...
React ( redux 的使用流程及简单的案例 ,redux的数据划分使用,以及react-redux,react-thunk的使用)
lllllllwj的博客
05-16 917
redux redux基础 redux中数据的划分（ reducer 划分） redux中的中间件 组成部分 store 数据的管理者 view react的组件来充当 actionsCreators 动作的创建者， 用来发送一个 action ❥(^_-) reducer 动作的触发者， 用来修改数据的 ，reducer是一个纯函数，它里面有一个返...
Redux中间件之redux-thunk使用详解
qq_37942845的博客
09-23 784
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 214
redux-thunk中间件实现异步action
Redux中间件及中间件的执行原理（redux-thunk）
Liberal_w的博客
07-01 489
附上原文版权声明：转载请附上原文出处链接。 附上原文链接：https://blog.csdn.net/p445098355/article/details/105218217 一、Redux-thunk中间件 1.第一步安装redux-thunk中间件 npm install redux-thunk 2.再store中引入thunk组件 import {createStore,applyMiddleware } from '...
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、付费专栏及课程。

余额充值