React 和 Redux 是现今前端领域最流行的技术之一。它们的结合能够让我们更好地构建可复用和可维护的大型应用程序。在本文中，我们将通过一个小 Demo 来演示如何使用 React 和 Redux 实现一个简单的计数器应用程序。
初识 Redux
Redux 是一个状态管理库，它可以帮助我们更好地管理应用程序的状态。在 Redux 中，我们将应用程序的状态存储在一个称为 Store 的地方。我们通过使用 Action 来描述发生了什么，Reducer 来更新状态，以及 Store 来存储状态的过程来管理状态。
在 Redux 中，我们通常需要定义以下几个概念:
1. Action
Action 是描述发生了什么的对象。它们是一种纯 JavaScript 对象，通常包含一个类型属性和一些负载数据。例如，下面是一个简单的 Action:
{
type: 'INCREMENT',
payload: 1
}这个 Action 描述了一个“增加计数器”的操作，增加的数量是 1。
2. Reducer
Reducer 是负责更新应用程序状态的函数。它们接收一个旧状态和一个 Action，并返回一个新状态。例如，下面是一个简单的 Reducer:
-- -------------------- ---- -------
-------- -------------------- - -- ------- -
------------------- -
---- ------------
------ ----- - ---------------
---- ------------
------ ----- - ---------------
--------
------ ------
-
-这个 Reducer 描述了一个简单的计数器，当传入一个“INCREMENT”Action 时，它会返回一个增加后的状态。
3. Store
Store 是存储应用程序状态的容器。它负责接收 Action 并将它们发送给 Reducer 来更新状态。我们可以使用 createStore 函数来创建一个 Store。例如，下面是一个简单的 Store:
import { createStore } from 'redux';
import counterReducer from './reducers/counterReducer';
const store = createStore(counterReducer);这个 Store 创建了一个默认状态为 0 的计数器，使用了我们之前定义的 Reducer。
搭建 React 环境
在继续之前，我们需要先搭建一个 React 环境。我们可以通过使用 Create React App 工具来创建一个简单的 React 应用程序。在终端中执行以下命令:
npx create-react-app my-counter-app
接下来，我们需要安装 Redux 和 React-Redux 来支持状态管理。在终端中执行以下命令:
npm install redux react-redux
实现 Counter
接下来，我们将使用 React 和 Redux 来实现一个计数器应用程序。我们需要实现以下几个部分:
1. 定义初始状态
我们需要定义一个初始的状态来存储计数器的值。我们可以在 App.js 中定义一个初始状态，并将它存储在 Redux Store 中。例如:
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ -------------- ---- ----------------------------
----- ----- - ----------------------------
-------- ----- -
------ -
--------- --------------
---- ----------------
------- -----------------------
------ ------- --------
---------
------
-----------
--
-
------ ------- ----2. 创建组件
我们需要创建一个“Counter”组件来显示计数器的值，并提供增加和减少计数器的功能。我们可以在 src/components 目录下创建一个 Counter.js 文件，并编写以下代码:
-- -------------------- ---- -------
------ - ------------ ----------- - ---- --------------
-------- --------- -
----- ----- - ----------------- -- -------
----- -------- - --------------
----- -------------- - -- -- -
----------
----- ------------
-------- -
---
-
----- -------------- - -- -- -
----------
----- ------------
-------- -
---
-
------ -
-----
---------- ------------
------- -------------------------------------------
------- -------------------------------------------
------
--
-
------ ------- --------在此组件中，我们使用了 useSelector 和 useDispatch 钩子来访问 Store 中的状态和分派 Action。
3. 渲染组件
最后，我们需要在 App.js 中渲染“Counter”组件。我们可以在 App.js 中添加以下代码:
-- -------------------- ---- -------
------ ------- ---- -----------------------
-------- ----- -
------ -
--------- --------------
---- ----------------
------- -----------------------
------ ------- --------
---------
-------- --
------
-----------
--
-
------ ------- ----结论
在本文中，我们介绍了 Redux 的基本概念，并演示了如何使用 React 和 Redux 实现一个简单的计数器应用程序。通过使用 Redux，我们可以更好地管理应用程序状态，并使其更加可复用和可维护。希望本文能对你有所帮助。如果你有任何疑问或建议，欢迎在评论区留言！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6711b351ad1e889fe20044ab