在开发 React 应用时，我们常常需要管理应用中的状态。当应用变得越来越复杂时，状态管理就变得越来越困难。Redux 是一种流行的状态管理库，它提供了一种可预测的状态管理方案，可以帮助我们更好地组织和管理应用的状态。
在本文中，我们将介绍如何使用 Redux 重构一个简单的 React 应用。我们将从基础概念开始，逐步深入，最终完成一个实用的示例。
Redux 基础概念
Redux 的核心概念包括：Store、Action 和 Reducer。
Store
Store 是应用中存储状态的地方。它是一个包含整个应用状态的对象。我们可以通过 getState() 方法获取当前状态，通过 dispatch(action) 方法触发状态更新，通过 subscribe(listener) 方法订阅状态变化。
Action
Action 是描述状态变化的对象。它包含一个 type 属性和一些其他属性。type 属性是一个字符串，表示这个 Action 的类型。其他属性可以是任何类型的数据，用来描述这个 Action 所带的数据。
Reducer
Reducer 是一个纯函数，用来描述状态的变化。它接收一个当前状态和一个 Action，返回一个新的状态。Reducer 必须是一个纯函数，也就是说，它不能修改传入的状态对象，而是要返回一个新的状态对象。
Redux 实战
现在，我们来看一个简单的 React 应用，它包含一个计数器组件，点击按钮可以增加或减少计数器的值。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
------ -
-----
--------- -----------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
--
-
------ ------- --------这个应用的状态只有一个 count 变量，它存储了计数器的值。现在，我们来使用 Redux 重构这个应用。
安装 Redux
首先，我们需要安装 Redux：
npm install redux
创建 Store
接下来，我们需要创建一个 Store，用来存储应用的状态。我们可以将 Store 放在应用的顶层组件中。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- --------
-------- --------- -
----- ------- --------- - ------------
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ---------------------
------ -
-----
--------- -----------
------- ----------- -- -------------- - --------------
------- ----------- -- -------------- - --------------
------
--
-
------ ------- --------在这个代码中，我们创建了一个 reducer 函数，它接收一个 state 和一个 action，返回一个新的 state。在 reducer 函数中，我们使用 switch 语句来根据不同的 action.type 处理不同的状态变化。如果 action.type 是 "INCREMENT"，则将 count 值加 1，如果是 "DECREMENT"，则将 count 值减 1。
接下来，我们使用 createStore(reducer) 方法创建一个 Store。这个方法接收一个 reducer 函数，并返回一个 Store 对象。我们将这个 Store 对象存储在组件的状态中。
更新状态
现在，我们需要将组件的状态与 Store 中的状态同步。我们可以使用 useSelector 和 useDispatch 两个 Hook 来实现这个功能。
-- -------------------- ---- -------
------ ------ - -------- - ---- --------
------ - ----------- - ---- --------
------ - ------------ ----------- - ---- --------------
-------- --------- -
----- -------- - --------------
----- ----- - ------------------- -- -------------
----- --------- - -- -- -
---------- ----- ----------- ---
--
----- --------- - -- -- -
---------- ----- ----------- ---
--
----- ------- - ------ - - ------ - -- ------- -- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
--
----- ----- - ---------------------
------ -
-----
--------- -----------
------- ------------------------------
------- ------------------------------
------
--
-
------ ------- --------在这个代码中，我们使用 useSelector((state) => state.count) Hook 来获取 Store 中的 count 值。我们还使用 useDispatch() Hook 来获取一个 dispatch 函数，用来触发状态更新。我们将这个 dispatch 函数传递给 increment 和 decrement 函数，当按钮被点击时，调用这个 dispatch 函数来触发状态更新。
现在，我们已经完成了一个使用 Redux 的计数器应用。这个应用非常简单，但是它包含了 Redux 的基本概念，可以帮助我们更好地理解 Redux 的工作原理。
总结
Redux 是一个流行的状态管理库，它提供了一种可预测的状态管理方案，可以帮助我们更好地组织和管理应用的状态。在本文中，我们介绍了 Redux 的基本概念，包括 Store、Action 和 Reducer。我们还使用一个简单的示例，演示了如何使用 Redux 重构一个 React 应用。
下一步，我们可以尝试使用 Redux 来管理更复杂的应用状态。同时，我们还可以学习 Redux 的高级特性，比如中间件、异步操作等。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/657ea7f1d2f5e1655d98038e