Redux 高级 -- 源码剖析：state、reducer、action 之间的复杂纠葛

2024-02-11 20:52:12

Redux 简介

Redux 是一个流行的前端状态管理库，它遵循 Flux 架构模式，旨在通过可预测的状态管理方式来构建大型、可扩展的前端应用程序。

Redux 的核心思想是将应用程序的状态集中存储在一个名为 store 的对象中，并通过 reducer 来更新状态。Redux 提供了一系列 API，如 createStore()、getState()、dispatch() 等，用于操作 store 对象。

Redux 的核心概念

Redux 有三个核心概念：store、reducer 和 action。

Store 是一个包含应用程序状态的对象。它保存了应用程序所有组件共享的数据，如用户数据、页面状态等。

Reducer 是一个纯函数，它根据传入的 action 和当前的 state，生成一个新的 state。Reducer 必须满足以下要求：

Action 是一个应用程序状态变更的对象。它包含一个 type 属性，用于标识状态变更的类型，以及一些可选的 payload 数据，用于状态变更的具体内容。

state、reducer 和 action 是 Redux 中相互关联的核心概念，它们共同作用来管理应用程序的状态。

State 驱动 UI ：应用程序的 state 驱动着 UI 的渲染。当 state 发生变化时，UI 会相应更新，以反映 state 的最新状态。
Action 触发 State 变化 ：Action 是触发 state 变化的唯一途径。当一个 action 被 dispatch 时，Redux 会调用相应的 reducer，并根据 reducer 的计算结果生成新的 state。
Reducer 计算新的 State ：Reducer 是一个纯函数，它根据传入的 action 和当前的 state，生成一个新的 state。Reducer 必须满足纯函数和确定性的要求。

Redux 提供了许多高级用法，如：

中间件：中间件是一种用于扩展 Redux 功能的工具。它可以用来做日志记录、错误处理、异步请求等各种操作。
combineReducers：combineReducers 是一个用于合并多个 reducer 的函数。它可以将多个 reducer 的计算结果合并成一个新的 state 对象。
Redux DevTools：Redux DevTools 是一个 Chrome 扩展程序，它可以帮助你调试 Redux 应用程序。它可以让你查看 state 的变化历史、回溯操作等。