Redux 是一个 JavaScript 的状态管理库，它与 React 一起使用，可以帮助我们更好地管理应用程序中的状态。在本文中，我们将详细介绍 Redux 的用法，并结合 React 实现一个简单的示例。
Redux 的基本概念
在介绍 Redux 的用法之前，我们需要了解一些基本概念。
Store
Store 是 Redux 的核心概念之一，它是一个保存应用程序状态的容器。在 Redux 中，Store 中的状态是不可变的，只能通过派发 Action 来更新。
Action
Action 是一个简单的 JavaScript 对象，它描述了发生了什么事件。例如，我们可以创建一个 Action 来表示用户登录成功：
const loginSuccessAction = {
type: 'LOGIN_SUCCESS',
payload: {
username: 'john',
email: 'john@example.com',
},
};Reducer
Reducer 是一个纯函数，它接收一个 Action 和当前状态，并返回一个新的状态。Reducer 是 Redux 中更新状态的唯一途径。
-- -------------------- ---- -------
-------- ----------------- - ----- ------- -
------ ------------- -
---- ----------------
------ ---------------
---- ---------
------ -----
--------
------ ------
-
-Dispatch
Dispatch 是一个函数，它接收一个 Action 并将其发送到 Store 中。当一个 Action 被派发时，Reducer 将会被调用，并更新 Store 中的状态。
React Redux 的用法
React Redux 是 Redux 的官方绑定库，它提供了一些帮助我们在 React 中使用 Redux 的工具。
安装和配置
首先，我们需要安装 React Redux：
npm install react-redux
接下来，在我们的应用程序中创建一个 Store：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ----------- ---- -------------
----- ----- - -------------------------
-------- ----- -
------ -
--------- --------------
-----
---
------
-----------
--
-在上面的代码中，我们使用 createStore 函数创建了一个 Store，并将其传递给 Provider 组件。Provider 组件是 React Redux 中的一个高阶组件，它将 Store 注入到 React 应用程序中的组件中。
连接组件
在 React Redux 中，我们可以使用 connect 函数将组件连接到 Store 中。
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ------ ---- -- -
------ -
-----
----- - -
-----
------------ -------------------
--------- ----------------
------
- - -
--------- --- ------
--
------
--
-
-------- ---------------------- -
------ -
----- -----------
--
-
------ ------- -------------------------------在上面的代码中，我们使用 connect 函数将 User 组件连接到 Store 中。mapStateToProps 函数将 Store 中的状态映射到组件的 props 中。
派发 Action
我们可以使用 mapDispatchToProps 函数将派发 Action 的函数映射到组件的 props 中。
-- -------------------- ---- -------
------ - ------- - ---- --------------
-------- ------- ----- -- -
----- ----------- - -- -- -
-------
--------- -------
------ -------------------
---
--
------ -
-----
------- ------------------------- -----------
------
--
-
-------- ---------------------------- -
------ -
------ ------ -- ---------- ----- ---------------- -------- ---- ---
--
-
------ ------- ------------- ---------------------------在上面的代码中，我们使用 mapDispatchToProps 函数将 login 函数映射到 Login 组件的 props 中。当用户点击“Log in”按钮时，login 函数将会被调用，并派发一个 LOGIN_SUCCESS 的 Action。
示例代码
下面是一个使用 React Redux 的简单示例代码：
-- -------------------- ---- -------
------ - ----------- - ---- --------
------ - --------- ------- - ---- --------------
-------- ----- -
------ -
--------- --------------
-----
----- --
------ --
------
-----------
--
-
----- ----- - -------------------------
-------- ------ ---- -- -
------ -
-----
----- - -
-----
------------ -------------------
--------- ----------------
------
- - -
--------- --- ------
--
------
--
-
-------- ------- ----- -- -
----- ----------- - -- -- -
-------
--------- -------
------ -------------------
---
--
------ -
-----
------- ------------------------- -----------
------
--
-
-------- ----------------- - ----- ------- -
------ ------------- -
---- ----------------
------ ---------------
---- ---------
------ -----
--------
------ ------
-
-
-------- ---------------------- -
------ -
----- -----------
--
-
-------- ---------------------------- -
------ -
------ ------ -- ---------- ----- ---------------- -------- ---- ---
--
-
----- ------------- - -------------------------------
----- -------------- - ------------- ---------------------------
------ ------- ----在上面的代码中，我们创建了一个 Store，并将其传递给 Provider 组件。User 组件使用 connect 函数连接到了 Store 中的状态。Login 组件使用 connect 函数将 login 函数映射到组件的 props 中。
总结
Redux 是一个强大的状态管理库，它能够帮助我们更好地管理应用程序中的状态。React Redux 是 Redux 的官方绑定库，它提供了一些帮助我们在 React 中使用 Redux 的工具。在本文中，我们详细介绍了 Redux 的基本概念和 React Redux 的用法，并结合一个简单的示例代码进行了演示。希望这篇文章能够帮助你更好地理解 Redux 和 React Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/653b97bc7d4982a6eb5eae17