用 Redux 做状态管理，真的很简单

最近在某项目中欲选一工具用作项目的全局状态管理，通过综合比较考虑，最终选择了 Redux。都说 Redux 难上手，今天通过 1 个案例， 3 个函数帮小伙伴们快速掌握并实践生产！

作为一名前端工程师，不少小伙伴对于 Redux 的概念、使用可能还是比较模糊，上手使用的心智负担也比较重！

但通过调研，目前 Redux 的生态可以说是非常丰富，这也使得将其引入作为项目的状态管理工具库变得 更加容易。

本文通过实际案例反向释义 Redux 中的名词概念，同时借助 @reduxjs/toolkit 模块简化 Redux 的使用，希望通过今天的分享可以帮助大家打开心结，抱抱 Redux，提升工作效率，从此不加班！

一、Redux 基础

一开始就阐释概念名词，可能会增加大家上手的难度，因此该部分只对 Redux 做最基本的一个认识。

1.1 什么是 Redux ？

Redux 是 JavaScript 状态容器，提供 可预测、可调试、集中式 的状态管理。

1.2 特点

• 可预测： 让你开发出 行为稳定可预测、可运行在不同环境 （客户端、服务端和原生程序）、且 易于测试 的应用。
• 集中管理： 集中管理应用的状态和逻辑可以让你开发出强大的功能，如 撤销/重做、 状态持久化 等等。
• 可调试： Redux DevTools 让你 轻松追踪 到 应用的状态在何时、何处以及如何改变。Redux 的架构会记下每一次改变，借助于 "时间旅行调试"，你甚至可以把完整的错误报告发送给服务器。
• 灵活： Redux 可与任何 UI 层框架搭配使用，它体小精干（只有 2kB，包括依赖），并且有 庞大的插件生态 来实现你的需求。

1.3 设计思想

Redux 既然是状态管理库，那么接下来掌握一下基本的数据流概念和原则

(1) 单一数据源

整个应用的 全局 state 被储存在一棵对象树（object tree）中，并且这个对象树只存在于唯一 Store（存储） 中

单一数据源使得同构应用开发变得容易，将状态在统一的 对象树 中维护管理也会更加容易！

(2) 单向数据流（one-way data flow）

Redux 单向数据流

1. 用 state 来描述应用程序在特定时间点的状况
2. 基于 state 来渲染出 View
3. 当发生某些事情时（例如用户单击按钮），state 会根据发生的事情进行更新，生成新的 state
4. 基于新的 state 重新渲染 View

(3) 不可变性（Immutability）

对于状态（state）的描述一般都是一个大的 JavaScript 对象（Object Tree），例如：

代码语言：javascript复制

const state = {
    isLoading: true,
    userInfo: {
        uid: 1,
        wechat: 'DYBOY2020',
        phone: 177****7777,
        history: [1,2,3,4,5]
    }
}

由于 JS 的动态性，使得对象是可以修改的，Redux 想要记录每一个状态，如果直接修改 state 中的引用类型属性，势必会导致 state 的变化不可追溯和预测。

因此 state 是只读的！唯一改变 state 的方法就是触发 action，action 是一个用于描述已发生事件的普通对象。

Redux 期望所有状态更新都是使用不可变的方式，因此，每一次的 state 变更，不会修改原对象，而是修改前一个状态（state）的克隆对象，以此来保证不可变性和正确性，同时记录每一次变化的 state。

(4) 纯函数更新 state

纯函数： 相同的输入，总是会得到相同的输出，并且在执行过程中没有任何副作用的函数。

为了保证数据的改变正确性，以及满足 state 不可变性的要求，因此引入了 纯函数 作为更新状态的唯一方式。

React Hooks 的状态管理就融合了 Redux 的设计思想，毕竟把 Redux 的作者 Dan Abramov 都直接挖过去了