随着前端应用越来越庞大，状态管理变得愈发复杂，我们的代码需要一种可靠的方式来管理它。React Redux 是 React 应用中最流行的状态管理库之一。它提供了一个可预测的方式来管理应用程序的状态，让状态管理变得更加容易和可维护。
在本文中，我们将学习 React Redux 的基础知识，并使用一个真实的应用程序示例详细介绍它的使用方法。
React Redux 基础概念
React Redux 有三个核心概念：store、action 和 reducer。
- Store：存储应用程序的状态
- Action：描述应用程序的状态变化
- Reducer：将一个操作应用于状态，并返回新的状态
Redux 的工作原理如下：
- Store 保存着应用程序的状态。
- 用户执行一个操作，如点击一个按钮。
- 应用程序派发一个 action 描述这个操作需要进行。
- Store 将这个 action 传递给 Reducer，Reducer 根据 action 类型更新应用程序的状态。
- 应用程序的组件会监听存储的状态，并在状态更新时重新渲染。
下面是一个简单的 Redux 应用程序示例：
-- -------------------- ---- -------
------ - ----------- - ---- -------
----- ------------ - - ------ - -
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------ -
------ - ------ ----------- - - -
-
---- ------------ -
------ - ------ ----------- - - -
-
--------
------ -----
-
-
----- ----- - --------------------
---------------- ----- ----------- --
----------------------------- -- ------- - ------ - -这个示例中，我们创建一个 Store 并提供一个 Reducer。Reducer 接收一个状态和一个 action，然后根据 action 类型选择更新状态。我们使用 createStore 方法来创建 Store。
在 dispatch 一个 action 后，我们可以通过调用 getState 方法获取当前状态。
Redux 工作原理示例
下面是一个简单的计数器应用程序。
在这个应用程序中，我们有一个数字和两个按钮：一个用于增加数字，一个用于减少数字。我们将使用 React Redux 来管理应用程序状态。
在开始之前，需要安装 Redux 和 React Redux：
npm install redux react-redux
应用程序主文件
-- -------------------- ---- -------
------ ----- ---- -------
------ - -------- - ---- -------------
------ - ----------- - ---- -------
------ ------- ---- -----------
------ ------- ---- ------------
----- ----- - --------------------
-------- ----- -
------ -
--------- --------------
-------- --
-----------
-
-
------ ------- ---我们从 React 的 Provider 组件开始。这个组件将 store 作为 props 提供给子组件。我们将 Counter 组件作为 Provider 的子组件传递进去。
然后，我们使用 createStore 方法创建了一个名为 reducer 的 store。
计数器组件
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -------------
-------- -------------- -
----- - ------ ---------- --------- - - -----
------ -
-----
----------------
------- ------------------------------
------- ------------------------------
------
-
-
-------- ---------------------- -
------ - ------ ----------- -
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- --
-
-
------ ------- ------------------------ ----------------------------这个组件使用了 mapStateToProps 和 mapDispatchToProps 函数来将 store 与组件连接起来。这使得我们能够轻松地从 store 获取值，并将 action 分发到 store 中。
mapStateToProps 函数将 state 映射成 props，允许我们在组件中使用 props.count 来获取状态的值。
mapDispatchToProps 函数将一个 dispatch 函数映射成 props，并返回一个对象，这个对象拥有一个 increment 和一个 decrement 函数，它们会分发 INCREMENT 和 DECREMENT action 到 store 中。
最后，我们使用 connect 函数将 Counter 组件与 store 连接起来。
Reducer
-- -------------------- ---- -------
----- ------------ - - ------ - -
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------ -
------ - ------ ----------- - - -
-
---- ------------ -
------ - ------ ----------- - - -
-
--------
------ -----
-
-
------ ------- -------在这个示例中，我们从一个初始状态开始，并使用 switch 语句在 INCREMENT 和 DECREMENT 操作中更新状态。
总结
React Redux 可以帮助我们管理复杂的应用程序状态，使代码更加容易维护和理解。在这篇文章中，我们学习了 React Redux 的基础知识，并使用一个计数器示例详细介绍了其使用方法。我们探讨了 store、action 和 reducer 这三个核心概念，并通过代码示例展示了它们的工作原理。
希望本文对你学习 React Redux 有所帮助。如果你有任何问题或建议，请在下面的评论中留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/648bce5a48841e9894a19919