From e24a4c8d100cef6b3ab87741de056696ac6fd6ba Mon Sep 17 00:00:00 2001
From: Elliott Marquez <5981958+e111077@users.noreply.github.com>
Date: Fri, 15 Dec 2023 22:37:30 -0800
Subject: [PATCH 1/8] Write an article on Reactive Controllers and Redux
---
.../lit-dev-content/site/_data/authors.json | 10 +
.../site/_includes/article.html | 7 +
.../site/_includes/articles.html | 3 +-
.../site/articles/article/article.11tydata.js | 1 +
.../article/redux-reactive-controllers.md | 731 ++++++++++++++++++
.../lit-dev-content/site/css/articles.css | 11 +-
.../application-sans-labels.webp | Bin 0 -> 17780 bytes
.../application.webp | Bin 0 -> 29880 bytes
.../mixins-vs-controllers.webp | Bin 0 -> 50608 bytes
.../redux-completed-2x.webp | Bin 0 -> 53976 bytes
.../redux-completed.webp | Bin 0 -> 28612 bytes
.../redux-cycle-2x.webp | Bin 0 -> 64414 bytes
.../redux-cycle.webp | Bin 0 -> 32714 bytes
.../shape-dials.webp | Bin 0 -> 6078 bytes
.../ui-completed-2x.webp | Bin 0 -> 54646 bytes
.../ui-completed.webp | Bin 0 -> 32790 bytes
.../images/articles/redux_lit_controller.webp | Bin 0 -> 17728 bytes
.../articles/redux_lit_controller_2x.webp | Bin 0 -> 36280 bytes
.../site/images/authors/brian-vann.webp | Bin 0 -> 9308 bytes
.../site/images/social/linkedin.svg | 8 +
.../lit-dev-content/site/learn/index.html | 4 +-
.../site/learn/learn.11tydata.js | 6 +-
22 files changed, 774 insertions(+), 7 deletions(-)
create mode 100644 packages/lit-dev-content/site/articles/article/redux-reactive-controllers.md
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/application-sans-labels.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/application.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/mixins-vs-controllers.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/redux-completed-2x.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/redux-completed.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/redux-cycle-2x.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/redux-cycle.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/shape-dials.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/ui-completed-2x.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux-reactive-controllers/ui-completed.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux_lit_controller.webp
create mode 100644 packages/lit-dev-content/site/images/articles/redux_lit_controller_2x.webp
create mode 100644 packages/lit-dev-content/site/images/authors/brian-vann.webp
create mode 100644 packages/lit-dev-content/site/images/social/linkedin.svg
diff --git a/packages/lit-dev-content/site/_data/authors.json b/packages/lit-dev-content/site/_data/authors.json
index 69c41c872..5afd6a58e 100644
--- a/packages/lit-dev-content/site/_data/authors.json
+++ b/packages/lit-dev-content/site/_data/authors.json
@@ -59,5 +59,15 @@
"image": {
"url": "authors/elliott-marquez.webp"
}
+ },
+ "brian-vann": {
+ "name": "Brian Taylor Vann",
+ "links": {
+ "github": "taylor-vann",
+ "linkedin": "brian-vann"
+ },
+ "image": {
+ "url": "authors/brian-vann.webp"
+ }
}
}
diff --git a/packages/lit-dev-content/site/_includes/article.html b/packages/lit-dev-content/site/_includes/article.html
index e693f88ea..095f3eaa9 100644
--- a/packages/lit-dev-content/site/_includes/article.html
+++ b/packages/lit-dev-content/site/_includes/article.html
@@ -42,6 +42,13 @@
{% endif %}
+ {% if authorData.links.linkedin %}
+
+
+
+ {% endif %}
{% endif %}
diff --git a/packages/lit-dev-content/site/_includes/articles.html b/packages/lit-dev-content/site/_includes/articles.html
index 3beccf0fb..b07a983c4 100644
--- a/packages/lit-dev-content/site/_includes/articles.html
+++ b/packages/lit-dev-content/site/_includes/articles.html
@@ -15,7 +15,8 @@
-{% endblock %}
+
+ {% endblock %}
{% block content %}
{% set toc = content | toc %}
diff --git a/packages/lit-dev-content/site/articles/article/article.11tydata.js b/packages/lit-dev-content/site/articles/article/article.11tydata.js
index 5fdf6acaa..dce4cc55c 100644
--- a/packages/lit-dev-content/site/articles/article/article.11tydata.js
+++ b/packages/lit-dev-content/site/articles/article/article.11tydata.js
@@ -4,4 +4,5 @@ module.exports = {
permalink: (data) => `/articles/${data.page.fileSlug}/`,
},
tags: ['articles'],
+ thumbnailExtension: 'jpg',
};
diff --git a/packages/lit-dev-content/site/articles/article/redux-reactive-controllers.md b/packages/lit-dev-content/site/articles/article/redux-reactive-controllers.md
new file mode 100644
index 000000000..b0f2ac950
--- /dev/null
+++ b/packages/lit-dev-content/site/articles/article/redux-reactive-controllers.md
@@ -0,0 +1,731 @@
+---
+title: Redux + Lit with Reactive Controllers
+publishDate: 2023-12-14
+summary: Use Reactive Controllers to integrate libraries like Redux into Lit.
+thumbnail: /images/articles/redux_lit_controller
+thumbnailExtension: webp
+tags:
+ - reactive-controllers
+ - redux
+eleventyNavigation:
+ parent: Articles
+ key: Redux + Lit with Reactive Controllers
+ order: 0
+author:
+ - elliott-marquez
+ - brian-vann
+---
+
+Lit makes it easy to create web components – reusable HTML elements with shared logic. However, different elements often have similar behaviors, and creating another element just for sharing a behavior may be excessive.
+
+[Reactive Controllers](/docs/composition/controllers/) can help the problem of sharing logic across components without having to create a new web component. They are similar to custom hooks in React, and in this article, we will use them to integrate the state manager Redux with Lit's rendering lifecycle for a more self-contained, composable, idiomatic Lit experience.
+
+By the end of this article, you will learn how to use Reactive Controllers to integrate third party libraries into Lit by integrating Redux into Lit. To do this, we will create a Reactive Controller that selects part of a Redux state and updates a component whenever the state updates.
+
+## What is a Reactive Controller?
+
+Reactive Controllers are a programming pattern that makes it easy to share logic between components by hooking into a component’s reactive update lifecycle. They achieve this by expecting an object that exposes an interface rather than having to create a new component or subclassing like you would with a mixin.
+
+One advantage of the Reactive Controller pattern is that it creates a **with** relationship rather than an **is** relationship. For example, a component that uses a Reactive Controller that incorporates Redux logic is a **component with Redux selector abilities**, whereas a mixin that does the same would mean that the **component is a Redux selector component**. This type of composability results in code that is more portable, self-contained, and easier to refactor. This is because components that inherit via subclassing are more closely coupled with the logic they inherit.
+
+
+
+Reactive Controllers are just an interface – a pattern, which makes them easier to use with other component systems without committing to a specific architecture. This makes it possible to create Reactive Controller adapters that work with other frameworks and libraries, such as [React](https://www.npmjs.com/package/@lit/react#usecontroller), Vue, Angular, and Svelte.
+
+## What is Redux?
+
+[Redux](https://redux.js.org/) is a mature library that introduces patterns to manage state across a JavaScript application. Redux currently does not have much new adoption and is not endorsed by the Lit team as a solution for all state management needs. Despite this, we will be using Redux as an example for creating a Reactive Controller, because the patterns used in integrating Redux into Lit with a Reactive Controller may be used to integrate for other popular libraries.
+
+There are generally three concepts that Redux introduces:
+
+1. Stores
+2. Actions
+3. Reducers
+
+Stores are essentially stores of your current state. Actions are actions you would like to perform on the state, and reducers take actions and apply them to the current state to return a new state. Here is a diagram derived from the [official Redux documentation](https://redux.js.org/) that depicts the interaction pattern between these concepts:
+
+
+
+1. The UI has an interaction that triggers an event handler
+2. The event handler dispatches an Action to the store
+3. A reducer takes the current state and the action and computes the new state
+4. The reducer updates the state in the store
+5. The UI is updated with the newest state with a state subscription and, in our case, a Reactive Controller
+
+Lit would cover the UI (blue) section of this diagram – rendering and event handling. Redux would handle the orange, green, and red parts of this diagram. The example in this article is to create a Reactive controller that handles the interaction between the updated state and the UI by hooking into both Lit’s reactive update lifecycle and Redux’s state updates.
+
+## The Reactive Controller Interface
+
+The Reactive Controller package has two interfaces: one for the controller, `ReactiveController`, and one for the host that it is hooking into, `ReactiveControllerHost`.
+
+### ReactiveController
+
+The `ReactiveController` interface exposes four methods:
+
+- [`hostConnected()`](/docs/api/controllers/#ReactiveController.hostConnected)
+- [`hostDisconnected()`](/docs/api/controllers/#ReactiveController.hostDisconnected)
+- [`hostUpdate()`](/docs/api/controllers/#ReactiveController.hostUpdate)
+- [`hostUpdated()`](/docs/api/controllers/#ReactiveController.hostUpdated)
+
+In Lit `hostConnected()` is called when the host component is placed in the DOM or if the element is already placed in the DOM and the Reactive Controller was just attached. This is a good place to do initialization work when the host component is ready to be used such as adding event listeners.
+
+Similarly `hostDisconnected()` is called when the element is removed from the DOM. This is a good place to do some cleanup work such as removing event listeners.
+
+`hostUpdate()` is called before the element is about to render or re-render. This is a good place to synchronize or compute state before rendering.
+
+`hostUpdated()` is called after an element has just rendered or re-rendered. This is a good place to synchronize or compute a state that is reliant on rendered DOM. It is often discouraged to request an update to the host in this part of the lifecycle unless absolutely necessary as it may cause an unnecessary re-render of the component just after it has already rendered. Request host updates in `hostUpdated()` only when `hostUpdate()` cannot be utilized.
+
+### ReactiveControllerHost
+
+Reactive Controllers typically have access to an instance of an object that implements the `ReactiveControllerHost` interface, which is often passed to them upon initialization. This allows the Reactive Controller to attach itself to the host and request that it update and re-render.
+
+The `ReactiveControllerHost` interface exposes three methods and one property:
+
+- [`addController(controller: ReactiveController)`](/docs/api/ReactiveElement/#ReactiveElement.addController)
+- [`removeController(controller: ReactiveController)`](/docs/api/ReactiveElement/#ReactiveElement.removeController)
+- [`requestUpdate()`](/docs/api/ReactiveElement/#ReactiveElement.requestUpdate)
+- [`updateComplete: Promise`](/docs/api/ReactiveElement/#ReactiveElement.updateComplete)
+
+The `addController()` method takes in the controller that you want to hook into the host’s lifecycle.
+
+{% aside "info" "no-header" %}
+
+If the host is already attached to the DOM or rendered onto the page, then `hostConnected()` will be called after attaching the Reactive Controller via `addController()`.
+
+{% endaside %}
+
+A common pattern in Lit is to attach the current instance of the controller to the host in the `constructor()` of the ReactiveController. For example:
+
+```ts
+export class MyController implements ReactiveController {
+ private host: ReactiveControllerHost;
+
+ constructor(host: ReactiveControllerHost, options: MyOptions) {
+ this.host = host;
+ this.host.addController(this);
+ }
+}
+```
+
+The `removeController()` method is used less frequently than the other callbacks. It is useful when you do not want the controller to update with the host, such as: the host updates too often, the `hostUpdate[d]()` methods have slow or expensive logic, or you do not need the controller to run its updates while the component has been removed from the document.
+
+The `requestUpdate()` method is used to request the host component to re-run its update lifecycle and re-render. This is often called when the controller has a value that updates and should be reflected in the DOM. For example, the `@lit/task` package’s `Task` controller will do asynchronous work like fetching data or asynchronous rendering, and it calls the host’s `requestUpdate()` method to reflect that the state of the task has changed to pending, in progress, completed, or error which should be rendered in the component.
+
+The read-only `updateComplete` property is often used in conjunction with `requestUpdate()` method. A `ReactiveControllerHost`’s update lifecycle is assumed to be asynchronous, so the `updateComplete` property is a promise that resolves when the host’s update lifecycle has completed. This is useful for controllers that need to update the DOM and then read from it. For example, imagine a controller that resizes a DOM element and needs to then read its new dimensions. This controller would update a property, call `requestUpdate()`, await `host.updateComplete`, and then read the DOM.
+
+## Redux Patterns
+
+Redux has a bit of verbosity associated with it in order to enforce the Redux state management patterns. In this article we will be making a simple component that renders circles and squares, renders how many of them exist, and can increment or decrement the amount of circles and squares. This component will have its state managed by Redux.
+
+
+
+### Initial State
+
+We need to define an initial state, so in a store. file we will give the initial state the following shape:
+
+```ts
+type Shape = 'square' | 'circle';
+interface State {
+ circles: number;
+ squares: number;
+ shapeList: Shape[];
+}
+const initialState: State = {
+ squares: 0,
+ circles: 0,
+ shapeList: []
+};
+```
+
+### Reducers
+
+Next we will write the reducer which will define which types of actions this store will be able to accept as well as determine how to update the state. Our reducer will have the following actions:
+
+- `increment_circles`
+- `increment_squares`
+- `decrement_circles`
+- `decrement_squares`
+- `reset`
+
+Here is how the reducer could look like in the store. file:
+
+```ts
+import type { Reducer, Action } from '@reduxjs/toolkit';
+...
+
+const CIRCLE = 'circle';
+const SQUARE = 'square';
+const INCREMENT_CIRCLES = 'increment_circles';
+const DECREMENT_CIRCLES = 'decrement_circles';
+const INCREMENT_SQUARES = 'increment_squares';
+const DECREMENT_SQUARES = 'decrement_squares';
+const RESET = 'reset';
+
+/**
+ * The reducer for the shape store.
+ */
+const countStoreReducer: Reducer = (
+ state = initialState,
+ action,
+) => {
+ switch (action.type) {
+ case RESET:
+ return {circles: 0, squares: 0, shapeList: []};
+ case INCREMENT_CIRCLES:
+ return {
+ ...state,
+ circles: state.circles + 1,
+ shapeList: [...state.shapeList, CIRCLE],
+ };
+ case DECREMENT_CIRCLES:
+ return {
+ ...state,
+ circles: Math.max(state.circles - 1, 0),
+ shapeList: removeShape(state, CIRCLE),
+ };
+ case INCREMENT_SQUARES:
+ return {
+ ...state,
+ squares: state.squares + 1,
+ shapeList: [...state.shapeList, SQUARE],
+ };
+ case DECREMENT_SQUARES:
+ return {
+ ...state,
+ squares: Math.max(state.squares - 1, 0),
+ shapeList: removeShape(state, SQUARE),
+ };
+ default:
+ return state;
+ }
+}
+
+/**
+ * A helper function that removes the last index of a
+ * given shape from the current state's `shapeList`.
+ */
+const removeShape = (state: State, shape: Shape): Shape[] => {
+ const shapes = [...state.shapeList];
+ const index = shapes.lastIndexOf(shape);
+ if (index > -1) {
+ shapes.splice(index, 1);
+ }
+
+ return shapes;
+};
+```
+
+### Store
+
+Next we will create the store and initialize it with the `RESET` action:
+
+```ts
+import { configureStore } from '@reduxjs/toolkit';
+
+// The countStoreReducer is the reducer we made in the last section
+const store = configureStore({reducer: countStoreReducer});
+store.dispatch({type: RESET});
+```
+
+We have not successfully created a Redux store that has an initial state and can update its state using the reducer.
+
+
+
+### Actions
+
+As demonstrated when initializing the state of the store, we can dispatch actions to the store using the [`store.dispatch(action)`](https://redux.js.org/api/store#dispatchaction) method. Let us create a `shape-dials` element that has circle and square increment buttons as well as a reset button. And upon click, will dispatch the appropriate actions:
+
+
+
+```ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import {
+ DECREMENT_SQUARES,
+ INCREMENT_SQUARES,
+ DECREMENT_CIRCLES,
+ INCREMENT_CIRCLES,
+ RESET,
+} from './store.js';
+
+
+@customElement('shape-dials')
+export class ShapeDials extends LitElement {
+ render() {
+ return html`
+
+
+ circles
+
+
+
+
+
+ squares
+
+
+
+
+ `;
+ }
+
+ /*
+ Event listener callbacks broadcast actions using a store's
+ own dispatch method.
+ */
+ private decrementCircles() {
+ store.dispatch({type: DECREMENT_CIRCLES});
+ }
+
+ private incrementCircles() {
+ store.dispatch({type: INCREMENT_CIRCLES});
+ }
+
+ private decrementSquares() {
+ store.dispatch({type: DECREMENT_SQUARES});
+ }
+
+ private incrementSquares() {
+ store.dispatch({type: INCREMENT_SQUARES});
+ }
+
+ private reset() {
+ store.dispatch({type: RESET});
+ }
+}
+```
+
+## Writing the SelectorController Reactive Controller
+
+Now we have our state managed by Redux and are dispatching actions to the store. The store is updating its state using the reducer.
+
+
+
+Next we need to give some elements the ability to connect and subscribe to changes to the store and update the UI. On top of that we will write a “Selector” which will select a specific datum from the overall state, and if that value changes, we will tell the Reactive Controller host to re-render.
+
+### Attaching the Controller and Accepting options
+
+First we will write the definition of the `SelectorController` class and attach it to the host element so that the Reactive Controller can hook into the host’s reactive update lifecycle:
+
+```ts
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export class SelectorController implements ReactiveController {
+ host: ReactiveControllerHost;
+
+ constructor(host: ReactiveControllerHost) {
+ this.host = host;
+ host.addController(this);
+ }
+}
+```
+
+Next, let's accept the following options: the Redux store in which we would like to subscribe to, as well as the Selector we would like to use to select what data we would like to render from the store:
+
+```ts
+import type { Store, Action as RAction } from '@reduxjs/toolkit';
+...
+
+export type Selector = (state: State) => Result;
+
+export class SelectorController<
+ State,
+ Action extends RAction,
+ Result = unknown
+> implements ReactiveController {
+ host: ReactiveControllerHost;
+ store: Store;
+ selector: Selector;
+
+ constructor(
+ host: ReactiveControllerHost,
+ store: Store,
+ selector: Selector,
+ ) {
+ this.host = host;
+ host.addController(this);
+
+ this.store = store;
+ this.selector = selector;
+ }
+}
+```
+
+Now let’s initialize the initially selected value so that the user can access the state’s initial value with `selectorController.selected` using the user's selector:
+
+```ts
+...
+export class SelectorController<
+ State,
+ Action extends RAction,
+ Result = unknown
+> implements ReactiveController {
+ ...
+ selected: Result;
+
+ constructor(
+ host: ReactiveControllerHost,
+ store: Store,
+ selector: Selector,
+ ) {
+ ...
+ this.selected = selector(store.getState());
+ }
+}
+```
+
+### Updating the Component on Store Update
+
+We now have a controller that initializes to the initial state of the store, next let’s update `this.selected` when the state updates and then tell the host element to re-render when we have detected a change in the selected value.
+
+Redux stores have a [`Store.subscribe(listener)`](https://redux.js.org/api/store#subscribelistener) method which will call a given callback whenever the state of the store updates. Let's hook into this, update `this.selected`, and tell the host to update when the component is connected to the DOM:
+
+```ts
+...
+export class SelectorController<
+ State,
+ Action extends RAction,
+ Result = unknown
+> implements ReactiveController {
+ ...
+
+ hostConnected() {
+ this.store.subscribe(() => {
+ const selected = this.selector(this.store.getState());
+ this.selected = selected;
+ this.host.requestUpdate();
+ });
+ }
+}
+```
+
+Great! Now the controller will update its value and tell the host element to update whenever the state changes. A problem we may encounter here is that we will call `host.requestUpdate()` whenever *any* state changes and not specifically when our selected value changes. In this case, we should do an equality check and let the user decide if they would like to implement their own equality check:
+
+```ts
+...
+export type EqualityCheck = (a: unknown, b: unknown) => boolean;
+const tripleEquals: EqualityCheck = (a, b) => a === b;
+
+export class SelectorController<
+ State,
+ Action extends RAction,
+ Result = unknown
+> implements ReactiveController {
+ ...
+ equalityCheck : EqualityCheck;
+
+ constructor(
+ host: ReactiveControllerHost,
+ store: Store,
+ selector: Selector,
+ equalityCheck = tripleEquals
+ ) {
+ ...
+ this.equalityCheck = equalityCheck;
+ }
+
+ hostConnected() {
+ this.store.subscribe(() => {
+ const selected = this.selector(this.store.getState());
+ if (!this.equalityCheck(this.selected, selected)) {
+ this.selected = selected;
+ this.host.requestUpdate();
+ }
+ });
+ }
+}
+```
+
+By first comparing the previous state to the current state, we can avoid re-rendering components that don't need to be re-rendered which can improve performance. Nice!
+
+In conclusion, we need to improve our component so that it does not re-render when the component is disconnected from the page and the store’s state changes. Redux’s `Store.subscribe()` method returns an `unsubscribe()` function. Let’s keep track of this and unsubscribe from the store’s changes when the component disconnects.
+
+```ts
+...
+export class SelectorController<
+ State,
+ Action extends RAction,
+ Result = unknown
+> implements ReactiveController {
+ ...
+ unsubscribe: () => void;
+ ...
+
+ hostConnected() {
+ this.unsubscribe = this.store.subscribe(() => {
+ ...
+ });
+ }
+
+ hostDisconnected() {
+ this.unsubscribe();
+ }
+}
+```
+
+We now have a Redux `SelectorController` Reactive Controller that listens to a Redux store for state changes, selects a value from the state, and updates the host element whenever that state value changes!
+
+## Using the Controllers
+
+Now that we have a functioning controller, let’s use it! Let’s create two components and update our shape dial’s controls:
+
+1. `shape-count`
+ - A component that counts the shapes and the total number of shapes
+2. `shape-list`
+ - A component that visualizes the shapes that we have added
+
+And finally we will update `shape-dials` to disable the buttons when they are not applicable. The application should look something like this:
+
+
+
+### shape-count
+
+`shape-count` should be a component that only subscribes and reads from the store. Let us create a custom element and render the table:
+
+```ts
+import { LitElement, html} from 'lit';
+import { customElement} from 'lit/decorators.js';
+
+@customElement('shape-count')
+export class ShapeCount extends LitElement {
+ render() {
+ return html`
+
+
+
${0}
+
circles
+
+
+
${0}
+
squares
+
+
+
${0}
+
total
+
+
+ `;
+ }
+}
+```
+
+Next we want to render actual counts rather than just `0`. In this case we will need all values from the state:
+
+- `state.circles`
+- `state.squares`
+- `state.shapeList`
+
+To achieve this, we will need a broad Redux selector that selects the entire state:
+
+```ts
+...
+import { SelectorController } from './selector-controller.js';
+import { store } from './store.js';
+
+@customElement('shape-count')
+export class ShapeCount extends LitElement {
+ private sc = new SelectorController(this, store, (state) => state);
+
+ render() {
+ const {circles, squares, shapeList} = this.sc.selected;
+
+ return html`
+
+
+
${circles}
+
circles
+
+
+
${squares}
+
squares
+
+
+
${shapeList.length}
+
total
+
+
+ `;
+ }
+}
+```
+
+Pressing the buttons in `shape-dials` should now update the count!
+
+To accomplish this, we initialized the `SelectorController` with the shared Redux store and rendered the entire state.
+
+### shape-list
+
+`shape-list` should be a component that only subscribes and reads the `state.shapeList` state from the store. Let's create a custom element with boilerplate, and render an array of `
`s with classes set to the shape name. Our pre-provided CSS styles will render the squares and circles based on the class name.
+
+```ts
+import { customElement } from 'lit/decorators.js';
+import { LitElement, html} from 'lit';
+
+@customElement('shape-list')
+export class ShapeList extends LitElement {
+ render() {
+ const shapeList = [];
+
+ return shapeList.map(
+ shape => html``
+ );
+ }
+}
+```
+
+Next, let’s initialize our `SelectorController` to hook into Redux and render the `shapeList`:
+
+```ts
+...
+import { SelectorController } from './selector-controller.js';
+import { store } from './store.js';
+
+@customElement('shape-list')
+export class ShapeList extends LitElement {
+ private sc = new SelectorController(this, store, (state) => state.shapeList);
+
+ render() {
+ const shapeList = this.sc.selected;
+ ...
+ }
+}
+```
+
+Finally, let’s give it an equality check to only update the render when the values have changed.
+
+```ts
+...
+
+@customElement('shape-list')
+export class ShapeList extends LitElement {
+ private sc = new SelectorController(
+ this,
+ store,
+ (state) => state.shapeList,
+ (oldVal, newVal) => {
+ if (oldVal.length !== newVal.length) {
+ return false;
+ }
+
+ return !oldVal.some((old, i) => {
+ return old !== newVal[i];
+ });
+ }
+ );
+
+ ...
+}
+```
+
+The `shape-list` component should now be responsive to changes in the Redux store!
+
+We were able to accomplish this by initializing the `SelectorController` with the shared Redux store. We then selected only the `shapeList` from the state and updated the host element only when the arrays were truly not equal.
+
+### Preventing invalid inputs in shape-dials
+
+To prevent invalid inputs, we will use our `SelectorController` to disable the buttons in the `shape-dials` component. For example, we want to disable the decrement buttons when the respective shape count is 0, and we want to disable the reset button when the length of the `shapeList` is 0.
+
+We will be using the entire state object again, so the selector will be broad. Let’s add the SelectorController to our `shape-dials` component.
+
+```ts
+...
+import {
+ ...
+ store,
+} from './store.js';
+import { SelectorController } from './selector-controller.js';
+
+@customElement('shape-dials')
+export class ShapeDials extends LitElement {
+ private sc = new SelectorController(this, store, (state) => state);
+
+ render() {
+ const {circles, squares, shapeList} = this.sc.selected;
+
+ return html`
+
+
+ circles
+
+
+
+
+
+ squares
+
+
+
+
+ `;
+ }
+
+ ...
+}
+```
+
+We should now have the decrement and reset buttons disabled upon invalid input, and a fully functional Lit-Redux application!
+
+## Integrating Other Libraries
+
+`SelectorController` is a simple integration. It only handles selectors, but it could easily abstract more of Redux into the controller, such as automatically dispatching actions when a property changes. Reactive Controllers give you the freedom to abstract as little or as much of a library as you want.
+
+### State Managers
+
+Reactive Controllers are useful for integrating state managers because it is common to want to update the view whenever the state changes or update the state manager when the UI changes.
+
+A great example of using Reactive Controllers for state management is the Apollo Element’s [Apollo Query Reactive Controllers](https://apolloelements.dev/api/core/controllers/query/) for Apollo GraphQL. Reactive Controllers can fit nicely in other similar projects like [MobX](https://mobx.js.org/README.html), [RxJS](https://rxjs.dev/), or [Zustand](https://github.com/pmndrs/zustand#using-zustand-without-react).
+
+### Data Fetching and Rendering Libraries
+
+Reactive Controllers are also useful for integrating libraries that fetch data and need to synchronize with Lit’s rendering or update lifecycle.
+
+For example, the [@lit/task](/docs/data/task/) library can perform simple async logic and easily render results and status. Reactive Controllers can fit nicely in other similar projects such as [Axios](https://axios-http.com/), [TanStack Query](https://tanstack.com/query/latest), or the experimental [@lit-labs/router](https://www.npmjs.com/package/@lit-labs/router).
+
+### Your Own Bespoke Behavior
+
+Reactive Controllers are generally a good way to share logic across components and we cannot cover every possible use case here. For example [Material Design’s Material Components](https://material-web.dev) have written their own bespoke controllers such as the [SurfacePositionController](https://github.com/material-components/material-web/blob/v1.1.1/menu/internal/controllers/surfacePositionController.ts) which can position a popup surface next to an anchor or [TypeaheadController](https://github.com/material-components/material-web/blob/v1.1.1/menu/internal/controllers/typeaheadController.ts) which can automatically select an item from a list just by typing the first few letters of the item like an autocomplete.
+
+Reactive Controllers are flexible, focused, and a great way to integrate libraries into your Lit project or any framework of your choice.
\ No newline at end of file
diff --git a/packages/lit-dev-content/site/css/articles.css b/packages/lit-dev-content/site/css/articles.css
index 536718eb5..c38789562 100644
--- a/packages/lit-dev-content/site/css/articles.css
+++ b/packages/lit-dev-content/site/css/articles.css
@@ -7,6 +7,16 @@ main {
padding-block-start: 0;
}
+article img {
+ max-width: 100%;
+ display: block;
+ margin-inline: auto;
+}
+
+article img:not([width]) {
+ width: 100%;
+}
+
/* ------------------------------------
* Header Section
* ------------------------------------ */
@@ -74,7 +84,6 @@ main {
* ------------------------------------ */
article {
font-size: 1rem;
- font-family: 'Manrope', sans-serif;
}
.articleFeedList {
diff --git a/packages/lit-dev-content/site/images/articles/redux-reactive-controllers/application-sans-labels.webp b/packages/lit-dev-content/site/images/articles/redux-reactive-controllers/application-sans-labels.webp
new file mode 100644
index 0000000000000000000000000000000000000000..cea1caeb700228e90a94d57b0b6c2770a5a6d84a
GIT binary patch
literal 17780
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
+
+Reactive Controllers are just an interface – a pattern, which makes them easier to use with other component systems without committing to a specific architecture. This makes it possible to create Reactive Controller adapters that work with other frameworks and libraries, such as [React](https://www.npmjs.com/package/@lit/react#usecontroller), Vue, Angular, and Svelte.
+
+## What is Redux?
+
+[Redux](https://redux.js.org/) is a mature library that introduces patterns to manage state across a JavaScript application. Redux currently does not have much new adoption and is not endorsed by the Lit team as a solution for all state management needs. Despite this, we will be using Redux as an example for creating a Reactive Controller, because the patterns used in integrating Redux into Lit with a Reactive Controller may be used to integrate for other popular libraries.
+
+There are generally three concepts that Redux introduces:
+
+1. Stores
+2. Actions
+3. Reducers
+
+Stores are essentially stores of your current state. Actions are actions you would like to perform on the state, and reducers take actions and apply them to the current state to return a new state. Here is a diagram derived from the [official Redux documentation](https://redux.js.org/) that depicts the interaction pattern between these concepts:
+
+
+
+1. The UI has an interaction that triggers an event handler
+2. The event handler dispatches an Action to the store
+3. A reducer takes the current state and the action and computes the new state
+4. The reducer updates the state in the store
+5. The UI is updated with the newest state with a state subscription and, in our case, a Reactive Controller
+
+Lit would cover the UI (blue) section of this diagram – rendering and event handling. Redux would handle the orange, green, and red parts of this diagram. The example in this article is to create a Reactive controller that handles the interaction between the updated state and the UI by hooking into both Lit’s reactive update lifecycle and Redux’s state updates.
+
+## The Reactive Controller Interface
+
+The Reactive Controller package has two interfaces: one for the controller, `ReactiveController`, and one for the host that it is hooking into, `ReactiveControllerHost`.
+
+### ReactiveController
+
+The `ReactiveController` interface exposes four methods:
+
+- [`hostConnected()`](/docs/api/controllers/#ReactiveController.hostConnected)
+- [`hostDisconnected()`](/docs/api/controllers/#ReactiveController.hostDisconnected)
+- [`hostUpdate()`](/docs/api/controllers/#ReactiveController.hostUpdate)
+- [`hostUpdated()`](/docs/api/controllers/#ReactiveController.hostUpdated)
+
+In Lit `hostConnected()` is called when the host component is placed in the DOM or if the element is already placed in the DOM and the Reactive Controller was just attached. This is a good place to do initialization work when the host component is ready to be used such as adding event listeners.
+
+Similarly `hostDisconnected()` is called when the element is removed from the DOM. This is a good place to do some cleanup work such as removing event listeners.
+
+`hostUpdate()` is called before the element is about to render or re-render. This is a good place to synchronize or compute state before rendering.
+
+`hostUpdated()` is called after an element has just rendered or re-rendered. This is a good place to synchronize or compute a state that is reliant on rendered DOM. It is often discouraged to request an update to the host in this part of the lifecycle unless absolutely necessary as it may cause an unnecessary re-render of the component just after it has already rendered. Request host updates in `hostUpdated()` only when `hostUpdate()` cannot be utilized.
+
+### ReactiveControllerHost
+
+Reactive Controllers typically have access to an instance of an object that implements the `ReactiveControllerHost` interface, which is often passed to them upon initialization. This allows the Reactive Controller to attach itself to the host and request that it update and re-render.
+
+The `ReactiveControllerHost` interface exposes three methods and one property:
+
+- [`addController(controller: ReactiveController)`](/docs/api/ReactiveElement/#ReactiveElement.addController)
+- [`removeController(controller: ReactiveController)`](/docs/api/ReactiveElement/#ReactiveElement.removeController)
+- [`requestUpdate()`](/docs/api/ReactiveElement/#ReactiveElement.requestUpdate)
+- [`updateComplete: Promise
+
+### Initial State
+
+We need to define an initial state, so in a 
+
+### Actions
+
+As demonstrated when initializing the state of the store, we can dispatch actions to the store using the [`store.dispatch(action)`](https://redux.js.org/api/store#dispatchaction) method. Let us create a `shape-dials` element that has circle and square increment buttons as well as a reset button. And upon click, will dispatch the appropriate actions:
+
+
+
+```ts
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import {
+ DECREMENT_SQUARES,
+ INCREMENT_SQUARES,
+ DECREMENT_CIRCLES,
+ INCREMENT_CIRCLES,
+ RESET,
+} from './store.js';
+
+
+@customElement('shape-dials')
+export class ShapeDials extends LitElement {
+ render() {
+ return html`
+ 
+
+Next we need to give some elements the ability to connect and subscribe to changes to the store and update the UI. On top of that we will write a “Selector” which will select a specific datum from the overall state, and if that value changes, we will tell the Reactive Controller host to re-render.
+
+### Attaching the Controller and Accepting options
+
+First we will write the definition of the `SelectorController` class and attach it to the host element so that the Reactive Controller can hook into the host’s reactive update lifecycle:
+
+```ts
+import type { ReactiveController, ReactiveControllerHost } from 'lit';
+
+export class SelectorController implements ReactiveController {
+ host: ReactiveControllerHost;
+
+ constructor(host: ReactiveControllerHost) {
+ this.host = host;
+ host.addController(this);
+ }
+}
+```
+
+Next, let's accept the following options: the Redux store in which we would like to subscribe to, as well as the Selector we would like to use to select what data we would like to render from the store:
+
+```ts
+import type { Store, Action as RAction } from '@reduxjs/toolkit';
+...
+
+export type Selector
+
+### shape-count
+
+`shape-count` should be a component that only subscribes and reads from the store. Let us create a custom element and render the table:
+
+```ts
+import { LitElement, html} from 'lit';
+import { customElement} from 'lit/decorators.js';
+
+@customElement('shape-count')
+export class ShapeCount extends LitElement {
+ render() {
+ return html`
+