Redux 是一种用于 JavaScript 应用程序的预测性状态容器，是 React 之外最流行的前端状态管理方案之一。Redux 可以通过 store 来管理全局状态，并且使得整个应用程序的状态变得可预测性和有序性。
在前端开发过程中，全局状态的引入是非常必要的，特别是在复杂的应用程序中。在本文中，我们将探讨如何在 Redux 中优雅地引入全局状态。
为什么需要引入全局状态？
在前端开发中，为了简化代码并增加可复用性，我们通常会将一些变量、方法传递给组件的 props 中，这样可以使得组件独立性更强。但当应用程序变得更加复杂，状态管理的复杂度也会同步增加。而全局状态的引入可以有效地解决这个问题，特别是在多个组件需要访问同一个状态时特别有用。
举个例子，假设我们有一个购物车页面，我们需要在不同的组件中展示购物车中的商品列表和总价。如果我们将购物车中的状态传递给不同的组件，那么这些组件的复杂度就会显著增加。而通过 Redux 引入全局状态，则可以使组件的状态更加简洁且易于管理。
Redux 中引入全局状态的方法
在 Redux 中引入全局状态最基本的方法是使用 Store。Store 是 Redux 状态容器的实例，可以读取和写入 state，并接收 action。在 Redux 应用程序中，store 是唯一一种修改 state 的方式。
但是，使用 Store 也有一些局限性。如果我们在应用程序中的每个组件中直接使用 Store，那么它将充斥着各种 class 和代码。这样将使得您的代码难以理解和维护。因此，我们需要寻找更加优雅和简单的方法来引入全局状态。
以下是三种优雅的方法：
方法一：使用 Provider
在 Redux 应用程序中，Provider 是另一种优雅的方法，它允许在 React 的任何级别上对全局状态进行 prop 传递。Provider 是一个高阶组件，它需要将 store 作为 props 传入，并使用 store.subscribe() 方法来监听 state 的变化。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----------- ---- -------------
----- ----- - -------------------------
----------------
--------- --------------
---- --
------------
-------------------------------
--通过使用 Provider，我们创建了一个全局的状态容器对象，并将其注入 React 组件中。然后，Redux 状态树中的任何 reducer 都可以使用这个 store 对象来访问和修改全局状态。
方法二：使用 Hooks
React Hook 是 React 16.8 版本新增的一项功能，它允许我们在不编写 class 的情况下使用 state 和其他 React 功能。使用 Hooks，我们可以轻松地在 React 组件中引入全局状态。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ----------- - ---- --------------
-------- ------ -
----- ----- - ----------------- -- -------------
------ -
-----
---------- ------------
------
--
-
------ ------- -----使用 useSelector 工具函数，我们可以轻松地从 Redux state 中获取数据。与传统的 mapStateToProps 函数不同，useSelector 是一个钩子函数，它允许我们使用函数组件而不需要编写 class 组件。
方法三：使用 Connect
connect 函数是 React-Redux 中最常用的实现方法之一，功能类似于在组件中使用 Provider。connect 函数是一个高阶函数，它将一个组件连接到 React-Redux store，并将 Redux state 和 action 以 props 的形式注入到组件中。
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- - ---- --------------
----- --- ------- --------------- -
-------- -
------ ----------- -------------------------
-
-
----- --------------- - ----- -- --
------ -----------
---
----- ------------------ - -------- -- -----
------ ------- ------------------------ -------------------------通过将 mapStateToProps 函数和 mapDispatchToProps 函数注入到 connect 函数中，我们可以将 Redux state 和 action 以 props 的形式传递到组件中。这种方法通常用于在传统的 class 组件中引入全局状态。
总结
在本文中，我们通过 Provider、Hooks 和 Connect 三种方法探讨了如何在 Redux 中引入全局状态。每种方法都具有不同的优点和适用场景。通过将全局状态引入到应用程序中，我们可以使应用程序更加可预测和简洁，同时也可以提高组件的复用性和管理性。在实际开发中，我们可以根据应用程序的不同需求选择最适合的方法。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647dc083968c7c53b088f4cd