Web Components 是一种可以在多个项目和团队中共享的复用组件方式。Custom Elements 是 Web Components 的一种主要实现方式，它可以让我们创建自定义元素并在 HTML 中使用它们。
Redux 是一个用于 JavaScript 应用程序状态管理的库，它提供了一个单一的全局 store，并且通过 reducer 函数来实现状态更新。Redux 可以轻松地与各种前端框架（如 React 或 Angular）集成，但是它也可以与 Custom Elements 一起使用，以便于对应特定组件或模块的本地状态。
在本文中，我们将探讨如何在 Custom Elements 中使用 Redux 进行状态管理。我们将关注以下主题：
在 Custom Elements 中使用 Redux 的优点和缺点；
如何在 Custom Elements 中启用 Redux；
如何创建适合 Custom Elements 的 Redux 组件；
如何订阅和取消订阅全局 Redux State 的更改；
如何在 Custom Elements 生命周期中使用 Redux Store；
如何将 Redux Store 中的状态映射到 Custom Elements 的属性。
使用 Redux 的优点和缺点
使用 Redux 进行状态管理的主要优点包括：
避免了组件之间的混乱状态传递。
提供了一种更加一致而且易于管理的状态管理方式，能够帮助开发人员更快地定位状态问题。
Redux 的时间旅行功能使得开发人员能够在应用程序发生故障时更好地了解到其状态。
但是，Redux 的使用也有其缺点。使用 Redux 可能会增加代码复杂性，并且它需要开发人员开发并理解一系列新的概念。
在 Custom Elements 中启用 Redux
在使用 Redux 之前，需要安装 redux 包和 @webcomponents/webcomponentsjs 包。
npm install redux @webcomponents/webcomponentsjs --save
在 Custom Elements 中使用 Redux 基本上与在传统的 Web 应用程序中使用相同。要在 Custom Elements 中使用 Redux，需要将 store 作为属性传递给 Custom Element，然后在 Custom Element 中访问这个 store。
-- -------------------- ---- -------
------ - ----------- ---- - ---- --------------
------ - ------- - ---- --------------
------ - ----- - ---- --------------------
----- --------------- ------- -------------------------- -
------ -- -
------ -----
------------------- - ------ --------- - ------ --- ----------------
--
-
-在上面的示例中，我们首先引入 LitElement 和连接帮助程序 connect，然后我们将 LitElement 中的 Custom Element 与 store 连接起来。最后，我们在 Custom Element 函数中检查 store 是否可用，并输出相应的结果。
创建适合 Custom Elements 的 Redux 组件
在 Custom Elements 中使用 Redux，需要在 Custom Element 中编写一个带有 Custom Element 实例和对 Redux store 的订阅/取消订阅的函数。这个函数需要将订阅结果返回给 Custom Element，并在 Custom Element 的适当生命周期中调用这个函数。
-- -------------------- ---- -------
------ - ---------- - ---- --------------
------ - ------- - ---- --------------
------ - ----- - ---- --------------------
------ ----- --------------- ------- ---------- -
----------------- -- -
--------------------------
------------ - ----------------------------------------------
-
-------------------- -- -
-----------------------------
---------------
-
------------- ------- -
---------------------
-
-在上面的示例中，我们首先创建一个 Custom Element，然后在其 connectedCallback 生命周期中订阅了 Redux store。当 Custom Element 断开连接时，我们释放了这个订阅。最后，我们定义了一个名为 _stateChanged 的函数，用于处理当 store 发生更改时的情况。
订阅和取消订阅全局 Redux State 的更改
在 connect 函数的参数中，需要添加适当的 mappedState 函数和 mappedDispatch 函数，这样就可以将全局 Redux state 中的数据和 dispatch 函数映射到 Custom Element 上了。
const mappedState = (state) => ({
message: state.message,
});
const mappedDispatch = (dispatch) => ({
getMessage: () => dispatch(actions.getMessage()),
});在 Custom Element 中，我们需要使用 connect()将 Custom Element 连接到 mappedState 和 mappedDispatch。然后在我们的 Custom Element 生命周期中，我们需要保存 unsubscribe 函数。
-- -------------------- ---- -------
----- --------------- ------- -------------------- --------------------------- -
----------- -- -
--------
------------ - -----
-
----------------- -- -
--------------------------
------------ - ------------------------------
-
-------------------- -- -
-----------------------------
-- -------------- -
---------------
------------ - -----
-
-
------------- -- -
-- -------------- -
---------------
------------ - -----
-
-
-在 Custom Elements 生命周期中使用 Redux Store
访问和使用 Store 时，我们需要小心。由于 Custom Element 是独立的 DOM 元素，因此如果在 Custom Element 生命周期之外访问 Store，可能会导致一些问题，例如无法及时更新 Custom Element，也无法清除 Custom Element 的订阅。
为了避免这些问题，我们可以在 Custom Element 的订阅回调函数中执行一些操作。
-- -------------------- ---- -------
------ - ---------- - ---- --------------
------ - ------- - ---- --------------
------ - ----- - ---- --------------------
------ - ------- - ---- ----------------------
----- --------------- ------- ---------------
----------
- -
----------- -- -
--------
------------ - -----
-
----------------- -- -
--------------------------
------------ - ----------------------------
-
-------------------- -- -
-----------------------------
-- -------------- -
---------------
------------ - -----
-
-
----------- -- -
-- -------------- -
---------------
------------ - -----
-
------------ - ------------------ -- -
---------------------
---
-
------ -- -
------ -----
--------------------------
------- ------------------------------- ----------------
--
-
-
------------------------------------------ -----------------在上面的示例中，我们首先定义一个 Custom Element，并在构造函数中创建一个名为 __unsub 的属性来保存 unsubscribe 函数。在 connectedCallback 生命周期时，我们将订阅函数保存到 __unsub 中。一旦我们取消订阅，我们就可以通过调用 __unsub() 来解除订阅。
最后，我们在 render 函数中更新了 Custom Element 的相应属性，并且添加了一个 @click 事件来触发相应的操作。
将 Redux Store 中的状态映射到 Custom Elements 的属性
当我们想要将 Redux Store 中的状态映射到 Custom Element 的属性时，我们需要使用 @property 装饰器和 get/set 方法来完成。
-- -------------------- ---- -------
------ - ----------- ----- -------- - ---- --------------
------ - ------- - ---- --------------
------ - ----- - ---- --------------------
------ - ------- - ---- ----------------------
----- --------------- ------- ---------------
----------
- -
----------- ----- ------ --
--------
----------- -- -
--------
------------ - -----
-
----------------- -- -
--------------------------
------------ - ----------------------------
-
-------------------- -- -
-----------------------------
-- -------------- -
---------------
------------ - -----
-
-
----------- -- -
-- -------------- -
---------------
------------ - -----
-
------------ - ------------------ -- -
------------ - -------------------------
---
-
------ -- -
------ -----
--------------------------
------- ------------------------------- ----------------
--
-
---------- -- -
-------------------------------------
-
-
------------------------------------------ -----------------在上面的示例中，我们首先使用 @property 装饰器将 Redux state 中的 message 属性映射到 Custom Element。在 render 函数中，我们使用 this.message 来输出以上映射的该属性的值。最后，我们定义一个 getMessage() 函数来触发 Redux action，更新相应的 Redux State。
总结
在本文中，我们学习了如何在 Custom Elements 中使用 Redux 进行状态管理。我们探讨了使用 Redux 的主要优点和缺点，以及如何在 Custom Elements 中启用 Redux，创建适合 Custom Elements 的 Redux 组件，订阅和取消订阅全局 Redux state 更改，将 Redux store 中的状态映射到 Custom Element 的属性。通过了解这些内容，我们将能够更好地使用 Redux 在我们的 Custom Elements 中实现状态管理，提高复用和代码性能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64af614048841e9894b6cac0