Redux 是一个用于 JavaScript 应用的状态容器，它可以帮助我们在应用中更好地管理数据流。在本篇文章中，我们将通过一个简单的示例来学习 Redux。
基础概念
在开始之前，让我们先了解一下 Redux 中的一些基础概念：
- Store：Redux 中的存储数据的地方，应用中只会有一个。
- Action：描述发生了什么，是一个纯对象。
- Reducer：接收一个 Action 和当前状态，并返回一个新的状态。
- Dispatch：用于将 Action 传递给 Reducer。
- Subscriber：用于监听 Store 中的变化。
示例
本示例中，我们将创建一个计数器应用。用户可以通过点击"+"按钮增加计数器的值，点击"-"按钮减少计数器的值。同时，我们将使用 Redux 来管理计数器的值。
安装依赖
首先，我们需要安装一些依赖。
--- ------- ----- -----------
创建 Store
接下来，我们需要创建一个 Store。在计数器应用中，我们只需要存储一个数值，因此我们可以简单地将其存储在一个变量中。
----- - ----------- - - -----------------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------我们刚刚创建了一个简单的 Store，并设置了初始状态为 { count: 0 }。我们同时定义了一个 reducer 函数来处理 Action。
- 当 Action 的类型为
INCREMENT时，我们将count加 1。 - 当 Action 的类型为
DECREMENT时，我们将count减 1。 - 否则，我们将返回当前状态。
创建组件
接下来，我们需要创建一个组件来展示计数器的值，并提供两个按钮用于修改计数器的值。
----- ----- - -----------------
----- - ------- - - -----------------------
-------- ---------- -
----- - ------ ---------- --------- - - ------
------ -
-----
----------------
------- ------------------------------
------- ------------------------------
------
--
-
-------- ---------------------- -
------ -
------ ------------
--
-
-------- ---------------------------- -
------ -
---------- -- -- ---------- ----- ----------- ---
---------- -- -- ---------- ----- ----------- ---
--
-
----- ------------ - ------------------------ -------------------------首先，我们定义了一个叫 App 的组件，它展示了当前的计数器值，并提供了两个按钮用于修改计数器的值。
接下来，我们使用 connect 函数来将 Store 和组件连接到一起。
mapStateToProps函数将 Store 中的状态映射到组件的属性中。mapDispatchToProps函数将组件的方法映射到 Action 中，并将其传递给 Reducer。
最后，我们通过 connect 函数将 App 组件连接到 Redux 中。
渲染应用
最后，我们需要将 ConnectedApp 组件渲染到页面上，并使用 store.subscribe 函数来监听 Store 中值的变化。
----- -------- - --------------------- ------------------ -- - ----------------------------- --- --------------------------------- --- ----------------------------- --- ---------------------------------
在这里，我们使用 store.subscribe 函数来监听 Store 中的变化，如果 Store 中的状态发生变化，我们调用 ReactDOM.render 函数来重新渲染组件。
运行示例
现在，我们已经完成了一个简单的计数器应用，并使用了 Redux 来管理状态。你可以到 CodePen 上运行这个示例，并进行尝试。
总结
通过这个示例，我们已经了解了 Redux 的基本概念，并学会了如何使用它来管理状态。在实际的开发中，Redux 还有更多的用法和技巧，读者可以通过阅读官方文档和其他教程来进行深入学习。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/65498c687d4982a6eb3be86e