Redux中间件redux-thunk

在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中间件原理-讲义
1.redux中间件简介 1.1.什么是redux中间件 redux 提供了类似后端 Express 的中间件概念,本质的目的是提供第三方插件的模式,自定义拦截 action -> reduce ...
Redux中间件（redux-thunk、redux-promise、redux-saga）
文章目录 1.redux中间件简介 1.1.什么是redux中间件 1.2.使用redux中间件 2.中间件的运行机制 2.1.createStore源码分析 2.2.applyMiddleware源 ...
[Redux/Mobx] redux的thunk作用是什么？
[Redux/Mobx] redux的thunk作用是什么? 作用:通过redux-thunk这个中间件,改变了redux中原本dispatch函数的作用,使它可以接受一个function作为disp ...
Redux中间件——Redux-thunk
什么是thunk? Redux-thunk是作为redux的middleware存在的,thunk是函数编程界的一个专有名词,主要用于calculation delay,也就是延迟计算. functi ...
redux中间件+react高阶组件
1.redux中间件中间件提供第三方插件的模式,自定义拦截 action -> reducer 的过程.变为 action -> middlewares -> reducer.这种 ...
Koa2和Redux中间件源码研究
一.Koa2中间件源码分析在Koa2中,中间件被存放在一个数组中. 使用koa中,最常见的就是app.use(fn),use函数部分源码如下所示.首先中间件必须是个函数.若是generator函数, ...
[Redux/Mobx] Redux怎么添加新的中间件？
[Redux/Mobx] Redux怎么添加新的中间件? applyMiddleware 个人简介我是歌谣,欢迎和大家一起交流前后端知识.放弃很容易, 但坚持一定很酷.欢迎大家一起讨论主目录与歌 ...
redux引用多个中间件_如何轻松创建您的第一个Redux中间件
redux引用多个中间件 by Gabriele Cimato 加布里埃莱·西马托(Gabriele Cimato) 如何轻松创建您的第一个Redux中间件 (How to create your f ...
【Redux】redux的使用详解
Redux的使用详解 Redux的核心思想理解纯函数 1. 为什么要使用redux JavaScript开发的应用程序,已经变得越来越复杂了: JavaScript需要管理的状态越来越多,越来越复 ...
Redux相关知识（什么是redux、redux的工作原理、redux的核心概念、redux的基本使用）(十一)
系列文章目录第一章:React基础知识(React基本使用.JSX语法.React模块化与组件化)(一) 第二章:React基础知识(组件实例三大核心属性state.props.refs)(二) 第 ...

Redux中间件redux-thunk

Redux中间件redux-thunk相关推荐

最新文章

热门文章