Redux 是一种状态管理工具，它可以帮助我们更好地组织和管理前端应用的状态。Redux 的核心概念是 store、action 和 reducer。本文将详细介绍 Redux 的基础知识和使用方法，并提供示例代码和实践指导。
Redux 的基本概念
Store
Store 是 Redux 的核心概念，它是应用程序的状态单一来源。Store 保存着应用程序的状态，包含了所有的数据和状态信息。Store 可以被看作一个 JavaScript 对象，它包含了应用程序的所有状态和数据。Redux 应用程序中只有一个 Store。
Action
Action 是一个包含数据的 JavaScript 对象，它描述了一个事件的发生，即应用程序中的某个操作。Action 包含了操作的类型和需要传递的数据。Action 通过 store.dispatch() 方法发送到 Store，Store 根据 Action 的类型更新应用程序的状态。
Reducer
Reducer 是一个纯函数，它接收当前的状态和一个 Action 作为参数，返回一个新的状态。Reducer 的作用是根据 Action 的类型更新 Store 中的状态。Reducer 的实现必须是纯函数，即给定相同的输入，总是返回相同的输出，不会对外部状态产生影响。
Redux 的使用方法
安装和引入
使用 npm 安装 Redux：
npm install redux
在应用程序中引入 Redux：
import { createStore } from 'redux';创建 Store
创建一个 Store 需要一个 Reducer，这个 Reducer 将根据 Action 的类型更新 Store 中的状态。在 Redux 中，Store 的状态是只读的，只能通过 Action 更新。
-- -------------------- ---- -------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------发送 Action
发送一个 Action 需要使用 store.dispatch() 方法，将 Action 对象作为参数传递给它。
store.dispatch({ type: 'INCREMENT' });获取 Store 中的状态
Store 的状态可以通过 store.getState() 方法获取。
console.log(store.getState());
订阅 Store 的变化
Store 可以通过 store.subscribe() 方法订阅变化，当 Store 中的状态发生变化时，会触发订阅的回调函数。
store.subscribe(() => {
console.log(store.getState());
});Redux 的实践指导
组织 Store 的状态
Store 的状态应该被组织成一个树形结构，每个节点表示一个状态的子集。这样可以更好地管理应用程序的状态，避免状态的冗余和重复。
-- -------------------- ---- -------
----- ------------ - -
------ ---
----------------- ----------
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- -----------
------ -
---------
------ -
---------------
-
--- ----------
----- ------------
---------- -----
-
-
--
---- --------------
------ -
---------
------ -------------------- --
------- --- --------- - - -------- ---------- --------------- - - ----
-
--
---- ------------------------
------ -
---------
----------------- -------------
--
--------
------ ------
-
-使用 Action Creator
Action Creator 是一个函数，它返回一个 Action 对象。使用 Action Creator 可以更好地组织和管理 Action，避免 Action 的重复和冗余。
-- -------------------- ---- -------
--- ---------- - --
-------- ------------- -
------ -
----- -----------
--- -------------
----
--
-
-------- -------------- -
------ -
----- --------------
--
--
-
-------- --------------------------- -
------ -
----- ------------------------
------
--
-使用 React 组件连接 Store
使用 React-Redux 库可以更好地将 React 组件和 Redux Store 连接起来。通过 connect() 函数可以将组件和 Store 连接起来，使组件能够访问 Store 中的状态和发送 Action。
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ---------------------- -
------ -
------ ---------------------------- -----------------------
--
-
-------- ---------------------------- -
------ -
------------ -- -- -
-------------------------
-
--
-
----- --------------- - ------------------------ ------------------------------示例代码
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ -
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
------------------ -- -
------------------------------
---
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---总结
本文介绍了 Redux 的核心概念和使用方法，包括 Store、Action、Reducer 和 connect() 函数等。Redux 可以帮助我们更好地组织和管理应用程序的状态，使应用程序更加可维护和可扩展。在实践中，我们需要注意组织 Store 的状态、使用 Action Creator 和使用 React-Redux 库连接组件和 Store 等细节问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657e5d06d2f5e1655d931eec