Custom Elements和Redux是两个非常强大的前端开发工具。其中Custom Elements允许您创建您自己的自定义HTML元素，并在您的应用程序中重复使用它们。Redux则是一个状态容器，它允许您管理应用程序的状态更新。当将它们结合使用时，您可以创建高度可重用的组件，这些组件可以管理自身的状态并更新Redux中的应用程序状态。在本教程中，我们将介绍如何将Custom Elements和Redux结合使用来开发一个高度可重用的组件，并提供示例代码和详细的指导说明。
Custom Elements
Custom Elements是一个Web API，它允许您创建自定义HTML元素。使用Custom Elements，您可以将常规HTML元素扩展为包含您自己的自定义行为的元素。创建自定义元素的过程涉及定义一个类，该类扩展自HTMLElement并实现一些必要的方法和属性。Custom Elements还允许您将自定义元素注册到浏览器中，使其能够在您的应用程序中使用。
以下是一个简单的Custom Element示例，它定义了一个名为my-element的自定义元素：
class MyElement extends HTMLElement {
constructor() {
super();
this.innerHTML = 'Hello, World!';
}
}
customElements.define('my-element', MyElement);在上面的示例中，我们定义了一个名为MyElement的类，它扩展自HTMLElement并在构造函数中设置了元素的innerHTML属性。我们还使用customElements.define方法注册了自定义元素，并将其命名为my-element。
使用我们刚才定义的my-element元素，您可以将其添加到任何HTML文档中：
<my-element></my-element>
在运行上面的HTML代码时，您将看到一个包含“Hello，World！”文本的元素。
Redux
Redux是一个状态容器，它允许您管理应用程序的状态更新。Redux的核心概念是Store，它是一个包含应用程序状态的单一对象。您可以使用Redux提供的API来更新这个Store并订阅状态的更改，从而在应用程序中管理状态。
以下是一个简单的Redux示例，它定义了一个名为counter的Store，并定义了两个简单的Action：increment和decrement。这些Action用于更新Store上的计数器状态值。
-- -------------------- ---- -------
----- ------------ - - ------ - --
-------- ------------- - ------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
----- ----- - ---------------------------
------------------ -- -
------------------------------
---
---------------- ----- ----------- ---
---------------- ----- ----------- ---
---------------- ----- ----------- ---在上面的示例中，我们首先定义了initialState，它包含一个count属性，其默认值为0。接下来，我们定义了一个叫做counter的函数，它接收一个state对象和一个action对象作为参数，并根据action的类型来更新状态。最后，我们使用Redux提供的createStore方法创建了一个名为store的Redux Store，并使用subscribe方法将一个简单的console.log订阅到状态更改事件中。
以下是dispatch方法的调用，用于在counter示例中触发Action：
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'INCREMENT' });
store.dispatch({ type: 'DECREMENT' });在运行上述代码时，您将看到Store上的count属性随着INCREAMENT和DECREASEMENT Action的调用而更新。这是Redux管理状态的核心概念，您可以使用这些状态更改来更新您的应用程序。
混合使用Custom Elements和Redux
现在您已经理解了Custom Elements和Redux各自的工作原理，我们来看看如何将它们结合使用。我们将开发一个名为my-counter的自定义元素，它包含一个计数器和两个按钮，用于增加和减少计数器的值。我们将使用Redux来管理my-counter元素的状态，并使用Custom Elements来创建可重用的元素。
以下是my-counter自定义元素的示例代码：
-- -------------------- ---- -------
----- --------- ------- ----------- -
------------- -
--------
----- ----- - -------------------------------------
----- ----- - -----------------
----- ------ - ------------------- ----- ------ ---
---------------- - -
-------
------ -
---------- -----
------- - -----
-
--------
------------ ---------------------
------- -------------------------
------- -------------------------
--
------------------------------------------------------------ -- -- -
---------------- ----- ----------- ---
---
------------------------------------------------------------ -- -- -
---------------- ----- ----------- ---
---
------------------ -- -
----- ----- - -----------------
---------------------------------------- - ------- ----------------
---
-
------ --- -------------------- -
------ ------------------
-
------------------------------ --------- --------- -
----- ----- - ------------------------------------ - ------ -------- ---
----- ----- - -----------------
------------------------------------------------- - ------- ----------------
-
------ --- --------- -
------ --------------- ------- -
------ ------------- -
---- ------------
------ - ------ ----------- - - --
---- ------------
------ - ------ ----------- - - --
--------
------ ------
-
-
-
-
----------------------------------- -----------在上面的示例中，我们定义了一个叫做MyCounter的类，它扩展了HTMLElement并使用了Custom Elements API来注册自定义元素。在构造函数中，我们使用了Redux API来创建一个名为store的Redux Store。我们还使用了attachShadow方法来创建一个新的Shadow DOM，并在其中添加计数器元素和两个按钮。最后，我们使用了Redux的subscribe方法来订阅状态更改事件，并使用selector，querySelector和textContent属性来更新计数器元素的值。
在observedAttributes方法中，我们指定了一个名为initial-value的关注属性，并在attributeChangedCallback回调函数中将其值传递给Redux Store，以更新my-counter的状态。
最后，在reducer静态方法中，我们定义了一个简单的reducer函数，它根据type属性来更新状态。
<my-counter initial-value="5"></my-counter>
使用上面的HTML代码将呈现一个包含计数器和两个按钮的Custom Elements元素。在点击按钮时，使用Redux Store更新计数器的值。
总结
在本教程中，我们介绍了如何将Custom Elements和Redux结合使用来创建高度可重用的组件。我们的示例my-counter元素将管理自身的状态，并使用Redux将状态更新通知给应用程序。我们还提供了示例代码和详细的指导说明，以帮助您开始使用Custom Elements和Redux来构建更高效的Web应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64824fb148841e98941c07e5