0


Redux核心理念的基本介绍

文章目录

Redux的核心理念介绍

此篇文章是React中的Redux状态管理库的基本介绍, Redux的详细使用过程在下篇文章中进行讲解

Redux的出现背景

JavaScript开发的应用程序,已经变得越来越复杂了:

JavaScript需要管理的状态越来越多,越来越复杂;

这些状态包括服务器返回的数据、缓存数据、用户操作产生的数据等等,也包括一些UI的状态,比如某些元素是否被选中,是否显示加载动效,当前分页;

管理不断变化的state是非常困难的:

状态之间相互会存在依赖,一个状态的变化会引起另一个状态的变化,View页面也有可能会引起状态的变化;

当应用程序复杂时,state在什么时候,因为什么原因而发生了变化,发生了怎么样的变化,会变得非常难以控制和追踪;

React是在视图层帮助我们解决了DOM的渲染过程,但是State依然是留给我们自己来管理:

无论是组件定义自己的state,还是组件之间的通信通过props进行传递; 也包括通过Context进行数据之间的共享;

React主要负责帮助我们管理视图,state如何维护最终还是我们自己来决定;

Redux就是一个帮助我们管理State的容器:Redux是JavaScript的状态容器,提供了可预测的状态管理;
Redux除了和React一起使用之外,它也可以和其他界面库一起来使用(比如Vue),并且它非常小(包括依赖在内,只有2kb)


Redux核心理念-Store

Redux的核心理念非常简单

比如我们有一个朋友列表需要共享到多个页面进行管理:

如果我们没有定义统一的规范来操作这段数据,那么整个数据的变化就是无法跟踪的;

比如页面的某处通过friends.push的方式增加了一条数据;

比如另一个页面通过friends[0].age = 25修改了一条数据;

friends:[{name:"aaa",age:19},{name:"bbb",age:20},{name:"ccc",age:19},{name:"ddd",age:18},]

整个应用程序错综复杂,当出现bug时,很难跟踪到底哪里发生的变化;

因此我们可以定义一些数据, 将数据存放在store中供其他页面使用


Redux核心理念-action

Redux要求我们通过action来更新数据:

所有数据的变化,必须通过派发(dispatch)action来更新;

action是一个普通的JavaScript对象,用来描述这次更新的type和content;

强制使用action的好处是可以清晰的知道数据到底发生了什么样的变化,所有的数据变化都是可跟追、可预测的;

当然,目前我们的action是固定的对象;

真实应用中,我们会通过函数来定义,返回一个action;


Redux核心理念-reducer

但是如何将state和action联系在一起呢? 答案就是通过reducer

reducer是一个纯函数;

reducer做的事情就是将传入的state和action结合起来生成一个新的state;

标签: javascript 前端 ui

本文转载自: https://blog.csdn.net/m0_71485750/article/details/126726779
版权归原作者 学全栈的灌汤包 所有, 如有侵权,请联系我们删除。

“Redux核心理念的基本介绍”的评论:

还没有评论