redux的middleware

最新推荐文章于 2022-04-07 23:04:37 发布
最新推荐文章于 2022-04-07 23:04:37 发布
阅读量189 收藏
点赞数
分类专栏： 前端 文章标签： redux 前端 middleware
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_34063804/article/details/79914582
版权

        上一篇博客我们讲到，react+redux的开发过程中与服务端进行异步交互的时候需要在middleware中进行，今天我们来讲讲如何写一个middleware。


首先观察一下整个middleware的结构，一个普通方法callApi，一个柯里化的方法store，并行store是唯一暴露出去的方法。从这里我们便可以得知用户action后dispatch前进入一个名为store的方法中，继续往下：


以进入这个middleware第一件事便是判断是否需要与服务端交互，如果不需要next(action)，具体看上图中红色箭头。


上图代码中可以看到，这个入口函数返回一个执行完callApi函数后得到的一个action，接下来去看看callApi函数到底做了什么


可以很清楚的看到，callApi函数其实就是执行了一个fetch异步向服务端发送数据并获得响应的过程。

        看到这里整个middleware就很清晰了，整个middleware就是判断action是否需要异步请求服务器，如若需要则通过fetch（这里也可以用ajax），处理完数据后从新打包成一个action继续dispatch()；如若不需要就直接继续dispatch()。


若还有什么不清楚的地方欢迎添加博主微信   594127951 




涂晓韬
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
redux深入理解之中间件(middleware)
糊一笑
08-21 2181
理解reduce函数 reduce() 方法接收一个函数作为累加器（accumulator），数组中的每个值（从左到右）开始缩减，最终为一个值。 arr.reduce([callback, initialValue])关于reduce的用法，这里不再做多述，可以去这里查看看如下例子：let arr = [1, 2, 3, 4, 5];// 10代表初始值，p代表每一次的累加值，在第一次为10 /
Redux中Middleware原理
suyongsimple的专栏
03-01 342
Redux中Middleware原理 下面以redux-trunk为示例了解applyMiddleware用于干什么。 redux-thunk/src/index.js function createThunkMiddleware(extraArgument) { return ({ dispatch, getState }) => next => action => { ...
Redux中间件
雷佳佳的博客
06-13 395
Redux中间件 1、applyMiddleware 方便调试，实时触发，线下使用 import {createStore，applyMiddleware} from 'redux'; import reducers from './reducers'; import Logger from 'redux-logger'; export default createStore(reducer...
redux middleware 详解
西涛offbye-移动全栈技术博客
06-12 1265
前言It provides a third-party extension point between dispatching anaction, and the moment it reaches the reducer.这是 redux 作者 Dan 对 middleware 的描述，middleware 提供了一个分类处理 action 的机会，在 middleware 中你可以检阅每一个流
Redux Middleware
a1104381972的博客
07-14 561
Redux Middleware redux为我们做了很多的事情，我们都可以不用通过显示的调用dispatch函数就将我们的action传递给reducer。这在前面的demo中就可以看到。但是至此，redux一直没有解决异步的问题。试想，如果我在页面输入一段内容，然后触发了一个搜索动作，此时需要向服务端请求数据并将返回的数据展示出来。这是一个很常见的功能，但是涉及到异步请求，刚刚的demo中的方
前端大厂最新面试题-Redux Middleware.docx
最新发布
06-06
Redux 中间件（Middleware）是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的。在 Redux 中，...
redux-Middleware1
03-19
**Redux Middleware 深入解析** Redux 是一个用于管理 JavaScript 应用状态的库，尤其在React应用中广泛使用。Redux Middleware 是 Redux 框架中的一个重要组成部分，它为 Redux 的 dispatch 动作过程提供了扩展...
learn-redux-middleware
03-25
在React应用中，Redux middleware的使用通常伴随着`applyMiddleware`函数，这是Redux库提供的一个工具，它接受一个或多个middleware作为参数，并返回一个新的store enhancer。这个enhancer可以被用在`createStore`时...
redux-middleware
05-01
该项目是通过引导的。 您将在下面找到一些有关如何执行常见任务的信息。 您可以在找到本指南的最新版本。目录自动格式化代码更改页面<title>... 使用AJAX请求获取数据与API后端集成节点Ruby on Rails 在开发中...
redux-promise-middleware例子
11-24
在本文中，我们将深入探讨如何使用`redux-promise-middleware`在React应用中实现异步操作，特别是针对登录验证功能。`redux-promise-middleware`是Redux生态系统中的一个中间件，它允许我们处理Promise，使得在Redux...
redux-fetch-middleware:使用fetch api进行Redux发送请求的最简单中间件
05-06
redux-fetch-middleware 用于redux的中间件，可帮助从rest API中获取数据并简化请求流程。 很多时候，我们只需要执行一些简单的请求，但是我们需要跟踪请求状态，该中间件将自动分派3个状态。 改变plesae参见 在V4版本中，我们删除了isomorphic-fetch依赖项，因为这只是一个polyfill，您可以根据需要在自己的项目中将其添加到任何地方。 安装 npm i redux-fetch-middleware --save 或使用yarn ： yarn add redux-fetch-middleware 用法 import restMiddlewareCreator from 'redux-fetch-middleware' ; import { applyMiddleware } from 'redux' ; const globalRes
redux-websocket：用于处理WebSocket连接的Redux中间件
02-05
redux-websocket redux-websocket是用于通过WebSocket连接管理数据的Redux中间件。 该中间件使用动作与WebSocket连接进行交互，包括连接，断开连接，发送消息和接收消息。 所有动作均遵循模型。 产品特点 用TypeScript编写。 通过分派动作与WebSocket连接进行交互。 通过创建多个中间件实例来连接到多个WebSocket流。 使用Redux中间件处理WebSocket事件，与Saga集成，并使用reducer保持状态。 自动处理重新连接。 安装 $ npm i @giantmachines/redux-websocket 组态
对redux中middleware 的理解
qq_45228255的博客
04-07 357
middleware（中间件）: 是解耦两个事物之间的一种抽象方案。 例如： node的Express 中，middleware 可以在 request 到 response 之间做很多事情。这里的 middleware 也是一样的道理，可以处理 action 到 store 之间的逻辑。 问题描述 在使用redux时，发送异步请求都是先调用action，在中间件进行发请求 问题一：为啥不在reducer内部action中对应的type发送请求呢？ 问题二：为啥不在调用action之前发送请求
Redux中的middleware
Maha
05-13 694
middleware What: 定义：middleware(中间件)，用来简化和隔离这些基础设施和业务逻辑之间的细节，让开发着能够关注在业务的开发上，以提高开发效率． 在express和koa等服务端框架中，middleware是指可以被嵌入在框架接收请求到产生响应过程中的代码．（比如：可以在express的middleware中完成添加CORS headers，记录日志，内容压...
redux的中间件（middleware）
一路斜阳的专栏
06-18 581
redux 中间件
redux middleware 的理解
weixin_33724046的博客
12-05 119
前言 这几天看了redux middleware的运用与实现原理，写了一个百度搜索的demo，实现了类似redux-thunk和redux-logger中间件的功能。 项目地址：https://github.com/CanFoo/react-baidu-search/tree/master redux中间件是通过函数式编程实现，因此要阅读源码需要有一定函数式编程基础，比如柯里化函数的实...
打造Redux中间件
weixin_33816300的博客
03-01 92
简单的 基本中间件： const customMiddleware = store => next => action => { if(action.type !== 'CUSTOM_ACT_TYPE') { return next(action) // 其他代码 } } ...
redux中间件的实现
wangrong111222的博客
07-12 372
所谓的中间件就是 在我们 最终到达到的方式最后的外层包裹，一层又一层的，就是中间件；且使用中间件的使用过程中发现中间件不符合规则，将会重复  给核心代码嵌套中间件这一过程；上代码：// mini-redux ,enhancer 增强器 //中间件的实现：1，扩展createStore；2，applymiddleware的实现并且输出出去； export function createStore(...
Redux中文文档精要：Action、Reducer、Middleware与React集成
- **Middleware**: 中间件是插在Action dispatch到Reducer之间的函数，可以扩展Redux的功能，如日志记录、错误处理、异步操作等。 - **搭配ReactRouter**: Redux可以与React Router结合，实现状态管理与页面导航的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值