redux的实现原理是什么,核心代码?

简介: redux的实现原理是什么,核心代码?

前言


相信很多人都在使用redux作为前端状态管理库进去项目开发,但仍然停留在“知道怎么用,但仍然不知道其核心原理”的阶段,接下来带大家分析一下redux和react-redux两个库的核心思想和API

redux


1.为什么要使用redux?

随着互联网的高速发展,我们的应用变得越来越复杂,进行导致我们的组件之间的关系也变得日趋复杂,往往需要将状态父组件 -> 子组件 -> 子子组件 -> 又或者只是简单的 父组件与子组件之间的props传递也会导致我们的数据流变得难以维护,因为二次开发者不在熟悉项目的情况下无法第一时间确定数据来源是由谁发起的。使用redux之后,所有的状态都来自于store中的state,并且store通过react-redux中的Provider组件可以传递到Provider组件下的所有组件,也就是说store中的state对于Provider下的组件来说就是全局的。

2.redux的核心原理是什么?

1.将应用的状态统一放到state中,由store来管理state。2.reducer的作用是返回一个新的state去更新store中对用的state。3.按redux的原则,UI层每一次状态的改变都应通过action去触发,action传入对应的reducer 中,reducer返回一个新的state更新store中存放的state,这样就完成了一次状态的更新4.subscribe是为store订阅监听函数,这些订阅后的监听函数是在每一次dipatch发起后依次执行5.可以添加中间件对提交的dispatch进行重写

3.redux的api有哪些?

1.createStore 创建仓库,接受reducer作为参数2.bindActionCreator 绑定store.dispatch和action 的关系3.combineReducers 合并多个reducers4.applyMiddleware 洋葱模型的中间件,介于dispatch和action之间,重写dispatch5.compose 整合多个中间件


相关文章
|
2月前
|
移动开发 小程序 前端开发
Taro 的实现原理是怎么样的?
Taro 的实现原理是怎么样的?
206 0
|
2月前
|
前端开发 JavaScript
React生命周期方法在实际开发中的应用场景有哪些?
【4月更文挑战第6天】 React 生命周期方法应用于数据获取、订阅管理、渲染逻辑处理、用户交互响应、性能优化、资源清理、强制更新、错误处理、动画实现、代码分割、服务端渲染、路由处理、依赖注入和集成第三方库。它们帮助控制组件行为和性能,但现代开发推荐使用Hooks替代部分生命周期方法。
24 0
|
11月前
|
JavaScript 前端开发 算法
Redux和Vuex的异同点,以及用到的相同的思想
Redux和Vuex的异同点,以及用到的相同的思想
|
2月前
|
存储 JavaScript 前端开发
redux实现原理?
Redux 是一个 JavaScript 状态管理库,它可以用于管理应用程序中的状态。Redux 的实现原理可以简单概括为以下几个步骤:
21 0
|
2月前
|
JavaScript API
【源码&库】跟着 Vue3 的源码学习 reactive 背后的实现原理
【源码&库】跟着 Vue3 的源码学习 reactive 背后的实现原理
53 0
|
2月前
|
存储 JavaScript API
【源码&库】Vue3 的响应式核心 reactive 和 effect 实现原理以及源码分析
【源码&库】Vue3 的响应式核心 reactive 和 effect 实现原理以及源码分析
37 0
|
11月前
|
JavaScript 中间件 API
redux原理是什么
redux原理是什么
70 0
|
11月前
|
JavaScript 前端开发 中间件
Redux原理及工作流程
Redux原理及工作流程
96 0
|
JavaScript 前端开发
简单了解一下Vue3的整体运行机制
Vue3是如何运行的 这章作为Vue3原理的开头,将整体介绍JS框架的作用,以及Vue的总体运行流程,整体架构分为哪些等。 致谢Vue Mastery非常好的课程,可以转载,但请声明源链接:文章源链接justin3go.com(有些latex公式某些平台不能渲染可查看这个网站)
131 0
简单了解一下Vue3的整体运行机制