Redux核心理念的基本介绍

怼烎@ 2023-10-02 20:57 10阅读 0赞

#### 文章目录 ####

*   *  Redux的核心理念介绍
     *   *  Redux的出现背景
         *  Redux核心理念-Store
         *  Redux核心理念-action
         *  Redux核心理念-reducer

### 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;