Redux 是一个非常流行的 JavaScript 应用程序状态管理库，它可帮助我们更容易地管理应用程序的状态，并使我们的代码更容易维护和扩展。在 React 中使用 Redux 可以使我们更好地组织我们的应用程序，并使我们的代码更具可读性和可扩展性。本文将介绍如何在 React 中使用 Redux。
安装 Redux
首先，我们需要安装 Redux。可以使用 npm 或 yarn 来安装 Redux。
npm install redux
或者
yarn add redux
创建 Redux Store
Redux 的核心是 Store，Store 包含所有应用程序状态的单一源。在 React 中，我们可以使用 createStore 函数来创建一个 Store。以下是一个简单的示例：
-- -------------------- ---- -------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------在上面的示例中，我们首先定义了一个初始状态对象 initialState，然后创建了一个简单的 reducer 函数来处理不同的 action 类型。最后，我们使用 createStore 函数来创建了一个 Redux Store。
在 React 中使用 Redux
在 React 中使用 Redux 需要使用 Provider 组件来将 Redux Store 传递给我们的应用程序。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
-------- ----- -
------ -
--------- --------------
-----
---------- -----------------------------
------- ----------- -- ---------------- ----- ----------- --------------
------- ----------- -- ---------------- ----- ----------- --------------
------
-----------
--
-
-------------------- --- ---------------------------------在上面的示例中，我们首先创建了一个 Redux Store，然后将其传递给 Provider 组件。在 App 组件中，我们使用 store.getState() 方法来获取当前状态，并在页面上显示计数器的值。我们还使用 store.dispatch() 方法来分派 INCREMENT 和 DECREMENT action。
使用 React Redux
React Redux 是一个官方的 Redux 绑定库，它提供了一些帮助我们更容易在 React 应用程序中使用 Redux 的组件和钩子。以下是一个简单的示例：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ----------- - ---- --------
------ - ------------ ----------- - ---- --------------
----- ------------ - -
------ --
--
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - --------- ------ ----------- - - --
---- ------------
------ - --------- ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------
-------- ----- -
----- ----- - ----------------- -- -------------
----- -------- - --------------
------ -
-----
---------- ------------
------- ----------- -- ---------- ----- ----------- --------------
------- ----------- -- ---------- ----- ----------- --------------
------
--
-
----------------
--------- --------------
---- --
------------
-------------------------------
--在上面的示例中，我们使用 useSelector 钩子来选择我们需要的状态，使用 useDispatch 钩子来分派 action。
结论
在 React 中使用 Redux 可以帮助我们更好地组织我们的应用程序，并使我们的代码更具可读性和可扩展性。在本文中，我们介绍了如何在 React 中使用 Redux，并提供了一些示例代码来帮助您入门。希望您能从中受益，并开始在您的项目中使用 Redux。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/675be86ea4d13391d8fba1a0