Redux.js 详解及基本使用：从概念到实战

Redux 概述

什么是 Redux

我们可以将 Redux 视为一个状态管理器，用于集中存储数据，从而方便地进行增、删、改操作。例如：

当从服务器获取收藏列表时，可以将获取到的列表数据交由 Redux 管理，实现多个页面间的共享使用，避免数据在不同组件间反复传递。

若 A 页面修改了某个状态，B 页面能够收到通知并执行相应的操作。

Redux 是一个为 JavaScript 应用设计的可预测状态容器。其核心在于结果的可预测性：每次状态变更都会产生确定的结果，这符合函数式编程中“相同输入产生相同输出”的思想。

Redux 将状态存储在单一数据源（对象树）中，使得读取和共享变得便捷且不易出错。状态只能被读取而不能直接修改，任何修改都必须通过分发事件（action）来统一处理。这种方式不仅便于追踪事件流，还能避免因多处直接修改状态而引发的竞态条件。在统一处理状态时，使用纯函数（即 reducer 中的函数）来修改状态。这些函数作为钩子，当需要修改状态树时由 Redux 调用。你可以编写不同的函数来处理不同类型的 action，或者复用同一个函数来处理多种 action。

使用 Redux 的必要性

为什么要使用 Redux

简而言之，Redux 旨在简化那些难以维护的数据管理场景。以小程序为例：当多个页面需要共享一套数据，且这些数据可能随时从网络获取更新或增减（例如页面跳转时传递非基本类型数据）时，若使用应用中的全局变量暂存，随着变量增多，后续维护将变得极其繁琐，接手代码的人员也会感到困扰。此外，当某处数据改变需要通知其他部分时，Redux 能很好地处理这类场景。如果你未遇到此类问题，说明项目复杂度尚未达到需要引入 Redux 的阶段，可暂不考虑使用。

Redux 核心组件解析

Redux 的四个核心部件

Action：Action 是一个事件对象，用于描述发生的具体行为。例如，用户点击刷新按钮会产生一个获取最新数据的事件，Action 即用于标识该事件。Action 是一个 JavaScript 对象，通常包含两个属性：type 和 data。type 表示 Action 的类型，data 包含新的状态数据。作为对象，Action 还可以携带其他属性，供状态处理时使用。 Reducer：Reducer 是处理状态的函数，负责实际的状态数据逻辑。它接收两个参数：修改前的状态（state）对象和 action 对象。在 reducer 中，可以根据 action 的 type 属性判断事件类型，并对 state 进行相应处理，最后返回新的 state。

Store：Store 是 Redux 的核心，即状态处理器，它提供了一系列 API 供开发者使用，例如：

getState 方法：用于获取最新的状态对象树。 subscribe 方法：用于订阅状态更新。该方法接受一个函数作为监听器，并返回一个注销订阅的函数，以便在不需要时移除监听器。

dispatch 方法：用于分发事件，它接受一个 action 作为参数，将事件发送出去。

State：State 是存储的数据，以对象树结构进行管理。需要注意的是，Store 每次传给 reducer 的 state 是整个 state 对象树中对应 reducer 名称（key）的子对象。

事件发出后，Store 会派遣 reducer 去处理该事件，得到新的 state，然后通知各个监听器有新变化（观察者模式）。 总体而言，Redux 就像一个快递仓库（Store），货物（State）按地域分类存储。每当有新货物进入（dispatch），处理程序或人员（Reducer）就会根据地名（type）将货物添加到仓库对应位置，随后仓库通知（subscribe）快递员来取货。

1、先是安装reduxJx, cnpm i --save rudux
2、创建一个store的js文件 
3、使用import来引用 redux   import { createStore } from 'redux'
4、然后在store 创建一个全局管理数据对象


const preloadState = {
  cartList: []
}
5、处理全局数据的方法
const reducer = function(state, action){
// 参数state：上一次的state状态
// 参数action：事件描述对象
console.log(action.type);
处理数据方法
if (item.a === 0 ){
  ...代码
}
//返回下一次全局使用的state状态
return state;
}
//创建仓库
const store = createStore(reducer, preloadState);
export default store
6、dispatch的使用 
    在store以外 store.dispatch()调用 参数1：设置store里面的action相对的type值,参数2：传递的数据 
  如下:
      store.dispatch({
          type: 'add',
          value: {
            id: 2
          }
      })
然后在store里面的action里面可以获取到 type和传入的value值，也可以在全局管理数据中的state改变全局的数据
7、在组件（页面）中也可以通过store. getState()来获取你存储的相对应的值，
8、store.subscribe()的操作是基本用来监听 store里面的一些数据变化进行操作的，需要主要的是dispatch的操作顺序，

总结

以上介绍了 Redux.js 的详细概念及基本使用方法，希望对大家有所帮助。如有任何疑问，欢迎留言，小编会及时回复大家！