Redux 是一个用于 JavaScript 应用的状态容器，它可以帮助我们在应用中更好地管理数据流。在本篇文章中，我们将通过一个简单的示例来学习 Redux。
基础概念
在开始之前，让我们先了解一下 Redux 中的一些基础概念：
- Store：Redux 中的存储数据的地方，应用中只会有一个。
- Action：描述发生了什么，是一个纯对象。
- Reducer：接收一个 Action 和当前状态，并返回一个新的状态。
- Dispatch：用于将 Action 传递给 Reducer。
- Subscriber：用于监听 Store 中的变化。
示例
本示例中，我们将创建一个计数器应用。用户可以通过点击"+"按钮增加计数器的值，点击"-"按钮减少计数器的值。同时，我们将使用 Redux 来管理计数器的值。
安装依赖
首先，我们需要安装一些依赖。
npm install redux react-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 中值的变化。
const ReactDOM = require('react-dom');
store.subscribe(() => {
ReactDOM.render(<ConnectedApp />, document.getElementById('root'));
});
ReactDOM.render(<ConnectedApp />, document.getElementById('root'));在这里，我们使用 store.subscribe 函数来监听 Store 中的变化，如果 Store 中的状态发生变化，我们调用 ReactDOM.render 函数来重新渲染组件。
运行示例
现在，我们已经完成了一个简单的计数器应用，并使用了 Redux 来管理状态。你可以到 CodePen 上运行这个示例，并进行尝试。
总结
通过这个示例，我们已经了解了 Redux 的基本概念，并学会了如何使用它来管理状态。在实际的开发中，Redux 还有更多的用法和技巧，读者可以通过阅读官方文档和其他教程来进行深入学习。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65498c687d4982a6eb3be86e