说说你对redux中间件的理解?常用的中间件有哪些?实现原理?

简介: 说说你对redux中间件的理解?常用的中间件有哪些?实现原理?

前言

中间件(Middleware)是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的.

如果需要支持异步操作,或者支持错误处理、日志监控,这个过程就可以用上中间件,Redux中,中间件就是放在就是在dispatch过程,在分发action进行拦截处理。

其本质上一个函数,对store.dispatch方法进行了改造,在发出 Action和执行 Reducer这两步之间,添加了其他功能

常用的中间件

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

工作原理

redux要求我们把数据都放在 store公共存储空间

一个组件改变了 store 里的数据内容,其他组件就能感知到 store的变化,再来取数据,从而间接的实现了这些数据传递的功能

React Components 需要获取一些数据, 然后它就告知 Store 需要获取数据,这就是就是 Action Creactor , Store 接收到之后去 Reducer 查一下, Reducer 会告诉 Store 应该给这个组件什么数据。

实现原理

Redux中,中间件就是放在就是在dispatch过程,在分发action进行拦截处理

Redux整个工作流程,当action发出之后,reducer立即算出state,整个过程是一个同步的操作

那么如果需要支持异步操作,或者支持错误处理、日志监控,这个过程就可以用上中间件,其本质上一个函数,对store.dispatch方法进行了改造,在发出 Action和执行 Reducer这两步之间,添加了其他功能

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


相关文章
|
7月前
|
存储 分布式计算 Dubbo
【中间件】zookeeper的实现原理
【中间件】zookeeper的实现原理
97 0
|
7月前
|
资源调度 JavaScript 前端开发
Redux 异步解决方案2. Redux-Saga中间件
Redux 异步解决方案2. Redux-Saga中间件
28 0
|
7月前
|
资源调度 JavaScript 前端开发
Redux异步解决方案 1. Redux-Thunk中间件
Redux异步解决方案 1. Redux-Thunk中间件
49 0
|
JavaScript 前端开发 中间件
对Redux中间件的理解?常用的中间件有哪些?实现原理?
对Redux中间件的理解?常用的中间件有哪些?实现原理?
124 0
|
JavaScript 前端开发 中间件
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理3
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理3
66 0
|
JavaScript 前端开发 中间件
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理4
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理4
62 0
|
JavaScript 前端开发 中间件
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理16
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理16
64 0
|
JavaScript 前端开发 中间件
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理13
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理13
53 0
|
JavaScript 前端开发 中间件
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理
前端学习笔记202307学习笔记第六十三天-redux单项数据流和中间件原理7
53 0
|
6月前
|
消息中间件 存储 中间件
【消息中间件】详解三大MQ:RabbitMQ、RocketMQ、Kafka
【消息中间件】详解三大MQ:RabbitMQ、RocketMQ、Kafka
1621 0