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 整合多个中间件


相关文章
|
7月前
|
JSON 移动开发 JavaScript
SPA(单页面应用)的基本实现原理
SPA(单页面应用)的基本实现原理
65 0
|
1月前
|
存储 JavaScript 前端开发
Redux原理
【10月更文挑战第26天】Redux通过单一数据源、只读状态、纯函数修改状态等核心概念,以及清晰的工作流程和中间件机制,为JavaScript应用程序提供了一种强大而可预测的状态管理方案。它与React等视图库的结合能够有效地实现数据驱动的视图更新,提高应用程序的可维护性和可扩展性。在实际应用中,根据项目的具体需求和复杂度,可以灵活地运用Redux及其相关的工具和技术,来构建高效、稳定的前端应用。
79 33
|
4月前
|
JavaScript 安全 API
pinia 底层原理实现方案
【8月更文挑战第10天】pinia 底层原理实现方案
204 6
|
4月前
|
存储 设计模式 JavaScript
vuex底层原理实现方案
【8月更文挑战第10天】vuex底层原理实现方案
68 4
|
7月前
|
存储 JavaScript 前端开发
redux实现原理?
Redux 是一个 JavaScript 状态管理库,它可以用于管理应用程序中的状态。Redux 的实现原理可以简单概括为以下几个步骤:
56 0
|
7月前
|
JavaScript API
【源码&库】跟着 Vue3 的源码学习 reactive 背后的实现原理
【源码&库】跟着 Vue3 的源码学习 reactive 背后的实现原理
83 0
|
JavaScript 前端开发 中间件
Redux原理及工作流程
Redux原理及工作流程
129 0
|
JavaScript 中间件 API
redux原理是什么
redux原理是什么
95 0
|
存储 缓存 JavaScript
一文梳理Vue3核心原理
一文梳理Vue3核心原理 前言 本篇文章更多是以梳理的视角进行讲述,将各个原理细节串在一起,方便查漏补缺,而非为了讲懂某个原理,当然也会大致讲解。所以如果某个原理不太清楚,请自行查阅其他文章,我也会尽量给出相关的阅读推荐。 ==本文阅读需要你有一定的vue应用程序开发经验并了解一些原理== 接下来先废话一下,关注知识点的可以直接跳过前言部分 首先,我们先回到最初的起点是为什么要使用Vue框架,它为我们做了什么工作: 能开发出一个应用? 性能好、构建产物轻量? 对用户友好,声明式代码心智负担小? 可组件化开发? 社区活跃,生态丰富? ...
1057 1