【 Redux 】 Redux中间件的理解?常用的中间件有哪些?实现原理?

1. 是什么

中间件(Middleware)是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的
那么如果需要支持异步操作,或者支持错误处理、日志监控,这个过程就可以用上中间件Redux中,中间件就是放在就是在dispatch过程,在分发action进行拦截处理,
其本质上一个函数,对store.dispatch方法进行了改造,在发出Action和执行Reducer这两步之间,添加了其他功能

2. 常用的中间件

有很多优秀的redux中间件,如:

  • redux-thunk:用于异步操作
  • redux-logger:用于日志记录

上述的中间件都需要通过applyMiddlewares进行注册,作用是将所有的中间件组成一个数组,依次
执行
然后作为第二个参数传入到createStore中

const store = createStore(reducer,applyMiddleware(thunk, logger) 
);

2.1 redux-thunk

redux-thunk是官网推荐的异步处理中间件
默认情况下的dispatch(action),action需要是一个JavaScript的对象
redux-thunk中间件会判断你当前传进来的数据类型,如果是一个函数,将会给函数传入参数值(dispatch,getState)

  • dispatch函数用于我们之后再次派发action
  • getState函数考虑到我们之后的一些操作需要依赖原来的状态,用于让我们可以获取之前的一些状态
    所以dispatch可以写成下述函数的形式:
const getHomeMultidataAction = () => {return (dispatch) => {axios.get("http://xxx.xx.xx.xx/test").then(res => {const data = res.data.data;dispatch(changeBannersAction(data.banner.list));dispatch(changeRecommendsAction(data.recommend.list)); }) } 
}

2.2 redux-logger

如果想要实现一个日志功能,则可以使用现成的redux-logger

import { applyMiddleware, createStore } from 'redux';
import createLogger from 'redux-logger';
const logger = createLogger();
const store = createStore(reducer,applyMiddleware(logger) 
);

这样我们就能简单通过中间件函数实现日志记录的信息

3. 实现原理

首先看看applyMiddlewares的源码

export default function applyMiddleware(...middlewares) {return (createStore) => (reducer, preloadedState, enhancer) => {var store = createStore(reducer, preloadedState, enhancer);var dispatch = store.dispatch;var chain = [];var middlewareAPI = {getState: store.getState,dispatch: (action) => dispatch(action) };chain = middlewares.map(middleware => middleware(middlewareAPI));dispatch = compose(...chain)(store.dispatch);return {...store, dispatch} } 
}

所有中间件被放进了一个数组chain,然后嵌套执行,最后执行store.dispatch 。可以看到,中间件内部(middlewareAPI)可以拿到getState和dispatch这两个方法在上面的学习中,我们了解到了redux-thunk的基本使用内部会将dispatch进行一个判断,然后执行对应操作,原理如下:

function patchThunk(store) {let next = store.dispatch;function dispatchAndThunk(action) {if (typeof action === "function") {action(store.dispatch, store.getState); } else {next(action); } }store.dispatch = dispatchAndThunk; 
}

实现日志输出原理:

let next = store.dispatch;
function dispatchAndLog(action) {console.log("dispatching:", addAction(10));next(addAction(5));console.log("新的state:", store.getState()); 
}
store.dispatch = dispatchAndLog;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/759795.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【办公类-16-07-07】“2023下学期 大班户外游戏2(有场地和无场地版,每天不同场地)”(python 排班表系列)

作品展示 背景需求: 2024年2月教务组发放的是“每周五天内容相同,两周10天内容相同”的户外游戏安排 【办公类-16-07-05】合并版“2023下学期 大班户外游戏(有场地和无场地版,两周一次)”(python 排班表系…

css预处理器scss的使用如何全局引入

目录 scss 基本功能 1、嵌套 2、变量 $ 3、mixin 和 include 4、extend 5、import scss 在项目中的使用 1、存放 scss 文件 2、引入 variables 和 mixins 2-1、局部引入 2-2、全局引入 3、入口文件中引入其他文件 项目中使用 css 预处理器,可以提高 cs…

Uibot6.0 (RPA财务机器人师资培训第1天 )RPA+AI、RPA基础语法

训练网站:泓江科技 (lessonplan.cn)https://laiye.lessonplan.cn/list/ec0f5080-e1de-11ee-a1d8-3f479df4d981(本博客中会有部分课程ppt截屏,如有侵权请及请及时与小北我取得联系~) 紧接着小北之前的几篇博客,友友们我们即将开展新课的学习~…

InsCode是一个集成了在线IDE、在线AI编程、在线算力租赁、在线项目部署以及在线SD 模型使用的综合代码开发平台。

一、 Stable Diffusion 模型在线使用   InsCode是一个集成了在线IDE、在线AI编程、在线算力租赁、在线项目部署以及在线SD 模型使用的综合代码开发平台。 Stable Diffusion是目前最火的AI绘画工具之一,它是一个免费开源的项目。通过Stable Diffusion,…

Python爬取网站数据

Python爬取网站数据 前言 什么是爬虫? 通过编写程序,模拟浏览器上网,然后让其去互联网上抓取数据的过程 爬虫合法还是违法? 在法律上是不被禁止的但是也有违法风险 爬虫带来的风险可以体现在如下2方面 爬虫干扰了被访问网站…

Centos上批量压缩子目录为ZIP文件的代码

需求: 写一个Centos7.9的脚本完成下列需求: 把目录/home/backup/test的第一级子目录依次进行压缩处理,压缩文件的格式为ZIP格式,压缩文件的名字就是子目录的名字,压缩文件存放于目录/home/backup/vgroup000001中。 注意…

Vulnhub - Raven2

希望和各位大佬一起学习,如果文章内容有错请多多指正,谢谢! 个人博客链接:CH4SER的个人BLOG – Welcome To Ch4sers Blog Raven2 靶机下载地址:https://www.vulnhub.com/entry/raven-2,269/ 0x01 信息收集 Nmap扫描…

spring-boot-devtools debug SilentExitException

spring-boot-devtools debug SilentExitException:springboot热部署debug模式进入SilentExitException /** Copyright 2012-2019 the original author or authors.** Licensed under the Apache License, Version 2.0 (the "License");* you may not use …

软考网工学习笔记(6) 广域通信网

公共交换电话网(pstn) 在pstn是为了语音通信而建立的网络。从20世纪60你年代开始用于数据传输 电话网有三个部分组成: 本地回路 ,干线 和 交换机 。 干线 和 交换机 一般采用数字传输和交换技术 ,而 本地回路基本采…

Ubutun部署docker,并使用docker部署springboot项目,关闭软件可继续访问

工具为xftp和xshell。 我这里使用的Ubuntu的版本是20.04的,话不多说,我们来直接上代码。 首先我们最好使用管理员权限进行操作,预防操作时遇到权限问题。 部署docker 登入管理员 不登入管理员也没关系。 su根据提示输入密码,进…

通过Docker安装MySQL数据库

1. 安装Docker 首先,确保你的系统上已经安装了Docker。如果还没有安装,可以访问Docker官网查看安装指南。 对于大多数Linux发行版,可以使用以下命令安装Docker: sudo apt-get update sudo apt-get install docker.io 安装完成…

JVM常见启动参数

目录 内存参数设置 垃圾收集 内存溢出 其他杂项 总结 java虚拟机(JVM)的启动参数可以用来调整其行为、性能和资源分配。以下是一些常见的JVM启动参数: 内存参数设置 初始化堆内存以满足应用程序需求是最常见的与性能相关的实践之一。 …

Linux实战笔记(三) 文件压缩

大家好,我是半虹,这篇文章来讲 Linux 系统中常用的文件压缩方式 0、序言 在 Linux 系统中,存在许多打包或压缩文件的工具 这篇文章会对一些常用的工具进行分类整理和介绍 如果只是需要知道怎么对不同格式的文件做解压缩,可以直…

Linux中的流刷新和定位

一、流的刷新 int fflush(FILE *fp); 1.成功时返回0;出错时返回EOF 2.将流缓冲区中的数据写入实际的文件 3.Linux下只能刷新输出缓冲区,输入缓冲区丢弃 4.如果输出到屏幕使用fflush(stdout) 二、流的定位 long ftell(FILE *stream);long fseek(FILE *stre…

《底层逻辑》--透过表象看系统

上一个视频,讲了微软公司通过改变与供应商的“连接关系”从而提高了工作餐的质量; 今天就讲讲拥有这种洞察力背后的理论依据,即“透过表象看系统”; 系统 要素 连接关系;再细化一下,构成…

如何在MATLAB中处理图像和视频?

在MATLAB中处理图像和视频是一项复杂而强大的任务,涉及多个步骤和工具。MATLAB提供了丰富的函数和工具箱,使用户能够轻松地加载、处理、分析和显示图像和视频数据。 一、图像处理基础 加载图像:在MATLAB中,可以使用imread函数加…

2024蓝桥杯每日一题(并查集)

备战2024年蓝桥杯 -- 每日一题 Python大学A组 试题一:奶酪 试题二:合并集合 试题三:连通块中点的数量 试题四:网络分析 试题一:奶酪 【题目描述】 现有一块大奶酪,它的高度为 hℎ…

shell source脚本中如何读取另外一个脚本中的变量

目录 前言语法举例注意 前言 要在一个Shell脚本中读取另一个Shell脚本中的变量,可以使用source命令或者.命令。这些命令用于在当前Shell环境中运行指定的脚本,从而使得脚本中的变量在当前Shell中可用。 语法 #!/bin/bash # 读取另一个Shell脚本中的变…

金智维的务实主义,打响大模型落地“突围战”

今年以来,新质生产力成为全社会关注的焦点。新质生产力的特征之一,就是深化新技术应用,尤其是AI及大模型,要加速落地到实际业务场景中,为千行万业提质增效。 2024是大模型技术做深、价值做实的一年。3月20日&#xff0…

【C++】详解智能指针

目录 一、智能指针的作用二、内存泄露1、什么是内存泄露2、内存泄漏分类3、如何避免内存泄露 三、智能指针的使用及原理1、RAII2、智能指针的原理3、std::auto_ptr4、std::unique_ptr5、std::shared_ptr1、std::shared_ptr原理2、std::shared_ptr的线程安全问题4、std::shared_…