reduxjs · markerikson · Dec 23, 2021 · Nov 13, 2021 · Dec 21, 2021 · Dec 23, 2021
diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json
@@ -4,7 +4,8 @@
     "vanilla-ts",
     "github/reduxjs/rtk-github-issues-example",
     "/examples/query/react/basic",
-    "/examples/query/react/advanced"
+    "/examples/query/react/advanced",
+    "/examples/action-listener/counter"
   ],
   "node": "14",
   "buildCommand": "build:packages",

diff --git a/examples/action-listener/counter/.env b/examples/action-listener/counter/.env
@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true
diff --git a/examples/action-listener/counter/package.json b/examples/action-listener/counter/package.json
@@ -0,0 +1,40 @@
+{
+  "name": "@examples-action-listener/counter",
+  "version": "1.0.0",
+  "private": true,
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.6.0-rc.1",
+    "@rtk-incubator/action-listener-middleware": "^0.6.0",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "clsx": "1.1.1",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-redux": "7.2.2",
+    "react-scripts": "4.0.3",
+    "typescript": "~4.2.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}
diff --git a/examples/action-listener/counter/public/index.html b/examples/action-listener/counter/public/index.html
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <link rel="stylesheet" href="https://unpkg.com/papercss@1.8.2/dist/paper.min.css">
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <title>Counter Example - Action Middleware</title>
+    <script>
+      (function () {
+        "use strict";
+        if (window.matchMedia('(prefers-color-scheme: dark)').matches) {
+          document.documentElement.classList.add('dark');
+        }
+      })();
+    </script>
+  </head>
+  <body>
+
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>
diff --git a/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx b/examples/action-listener/counter/src/components/ChangeThemeForm/ChangeThemeForm.tsx
@@ -0,0 +1,71 @@
+import { FormEvent } from 'react'
+import { ChangeEvent } from 'react-redux/node_modules/@types/react'
+import { useAppDispatch, useAppSelector } from '../../store'
+import { themeActions, ThemeState } from '../../services/theme/slice'
+import styles from './changeThemeForm.module.css'
+
+function isChecked(theme: ThemeState): boolean {
+  return theme.colorScheme === 'light'
+}
+
+export function ChangeThemeForm() {
+  const theme = useAppSelector((state) => state.theme)
+  const appDispatch = useAppDispatch()
+
+  const handleSubmit = (evt: FormEvent) => {
+    evt.preventDefault()
+  }
+
+  const handleChange = (evt: ChangeEvent<HTMLInputElement>) => {
+    appDispatch(
+      themeActions.changeColorScheme(
+        theme.colorScheme === 'light' ? 'dark' : 'light'
+      )
+    )
+  }
+
+  return (
+    <form action="#" onSubmit={handleSubmit} className={styles.form}>
+      <div className="form-group">
+        <label htmlFor="theme-switch" className={styles.colorSchemeIcon}>
+          <svg
+            aria-hidden="true"
+            xmlns="http://www.w3.org/2000/svg"
+            viewBox="0 0 24 24"
+            fill="currentColor"
+            stroke="currentColor"
+            strokeWidth="2"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          >
+            {theme.colorScheme === 'light' ? (
+              <>
+                <circle cx="12" cy="12" r="5" />
+                <line x1="12" y1="1" x2="12" y2="3" />
+                <line x1="12" y1="21" x2="12" y2="23" />
+                <line x1="4.22" y1="4.22" x2="5.64" y2="5.64" />
+                <line x1="18.36" y1="18.36" x2="19.78" y2="19.78" />
+                <line x1="1" y1="12" x2="3" y2="12" />
+                <line x1="21" y1="12" x2="23" y2="12" />
+                <line x1="4.22" y1="19.78" x2="5.64" y2="18.36" />
+                <line x1="18.36" y1="5.64" x2="19.78" y2="4.22" />
+              </>
+            ) : (
+              <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+            )}
+          </svg>
+        </label>
+        <label htmlFor="theme-switch" className="paper-switch">
+          <input
+            id="theme-switch"
+            name="theme-switch"
+            type="checkbox"
+            checked={isChecked(theme)}
+            onChange={handleChange}
+          />
+          <span className="paper-switch-slider round"></span>
+        </label>
+      </div>
+    </form>
+  )
+}
diff --git a/examples/action-listener/counter/src/components/ChangeThemeForm/changeThemeForm.module.css b/examples/action-listener/counter/src/components/ChangeThemeForm/changeThemeForm.module.css
@@ -0,0 +1,18 @@
+.form {
+  position: absolute;
+  top: 0.3rem;
+  right: 0.3rem;
+  z-index: 3;
+}
+
+.colorSchemeIcon {
+  width: 1.1rem;
+  margin: 0 !important;
+  padding-top: 0.1rem;
+}
+
+.form :global(.form-group) {
+  display: flex;
+  align-items: center;
+  gap: 0.2rem;
+}
diff --git a/examples/action-listener/counter/src/components/Counter/Counter.tsx b/examples/action-listener/counter/src/components/Counter/Counter.tsx
@@ -0,0 +1,73 @@
+import { EntityId } from '@reduxjs/toolkit'
+import { memo } from 'react'
+import { counterActions, counterSelectors } from '../../services/counter/slice'
+import { useAppDispatch, useAppSelector } from '../../store'
+import styles from './counter.module.css'
+import clsx from 'clsx'
+
+export interface CounterProps {
+  counterId: EntityId
+}
+
+const intervalMs = 1_000
+const delayMs = 2_000
+
+export const Counter = memo(function Counter({ counterId }: CounterProps) {
+  const counter = useAppSelector((state) =>
+    counterSelectors.selectById(state, counterId)
+  )
+  const appDispatch = useAppDispatch()
+
+  if (!counter) {
+    return null
+  }
+
+  const { id, value } = counter
+
+  const add = () => appDispatch(counterActions.updateBy({ id, delta: +1 }))
+  const subtract = () => appDispatch(counterActions.updateBy({ id, delta: -1 }))
+  const close = () => appDispatch(counterActions.removeCounter(id))
+  const updateAsync = () =>
+    appDispatch(counterActions.updateByAsync({ id, delayMs, delta: 1 }))
+  const intervalUpdate = () => {
+    if (counter.intervalMs) {
+      appDispatch(counterActions.cancelAsyncUpdates(id))
+    } else {
+      appDispatch(
+        counterActions.updateByPeriodically({ id, delta: 1, intervalMs })
+      )
+    }
+  }
+
+  return (
+    <section className={clsx('paper', styles.wrapper)}>
+      <button
+        type="button"
+        className={styles.closeBtn}
+        aria-label="close"
+        title="close"
+        onClick={close}
+      >
+        &times;
+      </button>
+      <h4>ID: {id}</h4>
+      <strong className={clsx(styles.counterValue, 'badge')}>{value}</strong>
+      <div className={styles.btnGroup}>
+        <button className="btn-small" type="button" onClick={add}>
+          +
+        </button>
+        <button className="btn-small" type="button" onClick={subtract}>
+          -
+        </button>
+        <button className="btn-small" type="button" onClick={intervalUpdate}>
+          {counter.intervalMs
+            ? `stop periodic update`
+            : `+1 every ${intervalMs / 1_000}s`}
+        </button>
+        <button className="btn-small" onClick={updateAsync}>
+          +1 after {`${delayMs / 1000}s`}
+        </button>
+      </div>
+    </section>
+  )
+})
diff --git a/examples/action-listener/counter/src/components/Counter/counter.module.css b/examples/action-listener/counter/src/components/Counter/counter.module.css
@@ -0,0 +1,59 @@
+.counterValue {
+  font-weight: 700;
+  font-size: 1.3rem;
+}
+
+.closeBtn {
+  position: absolute;
+  right: -8px;
+  top: -8px;
+  border: none;
+  background: transparent;
+  transition: none;
+  box-shadow: none;
+}
+
+.wrapper .closeBtn.closeBtn:hover,
+.wrapper .closeBtn.closeBtn:focus {
+  box-shadow: none;
+  transform: none;
+  border-color: transparent;
+  border: none;
+}
+
+.wrapper {
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: 1fr 1fr;
+  position: relative;
+  align-items: baseline;
+  padding: 1.5rem 1rem;
+  overflow: hidden;
+}
+
+.btnGroup {
+  display: flex;
+  gap: 4px;
+}
+
+.wrapper .btnGroup button {
+  margin: 0;
+}
+
+.wrapper h4 {
+  font-size: 1rem;
+}
+
+.btnGroup button:not(:first-of-type) {
+  margin-left: 0.4rem;
+}
+
+@media screen and (min-width: 780px) {
+  .wrapper {
+    grid-template-columns: 1fr auto 2fr;
+  }
+
+  .btnGroup {
+    justify-content: flex-end;
+  }
+}
diff --git a/examples/action-listener/counter/src/components/CounterList/CounterList.tsx b/examples/action-listener/counter/src/components/CounterList/CounterList.tsx
@@ -0,0 +1,19 @@
+import { useAppSelector } from '../../store'
+import { counterSelectors } from '../../services/counter/slice'
+import { Counter } from '../Counter/Counter'
+import styles from './counter.module.css'
+
+export function CounterList() {
+  const counterIds = useAppSelector((state) =>
+    counterSelectors.selectIds(state)
+  )
+
+  return (
+    <article className={styles.wrapper}>
+      <h3>Counters</h3>
+      {counterIds.map((counterId) => (
+        <Counter key={counterId} counterId={counterId} />
+      ))}
+    </article>
+  )
+}
diff --git a/examples/action-listener/counter/src/components/CounterList/counter.module.css b/examples/action-listener/counter/src/components/CounterList/counter.module.css
@@ -0,0 +1,7 @@
+.wrapper {
+  display: contents;
+}
+
+.wrapper p {
+  margin: 0.2rem;
+}
diff --git a/examples/action-listener/counter/src/components/CreateCounterForm/CreateCounterForm.tsx b/examples/action-listener/counter/src/components/CreateCounterForm/CreateCounterForm.tsx
@@ -0,0 +1,39 @@
+import { FormEvent, useState } from 'react'
+import styles from './createCounter.module.css'
+import clsx from 'clsx'
+import { useAppDispatch } from '../../store'
+import { counterActions } from '../../services/counter/slice'
+
+const sectionClassname = clsx('paper', styles.section)
+
+export function CreateCounterForm() {
+  const [initialValue, setInitialValue] = useState(0)
+  const appDispatch = useAppDispatch()
+  const handleSubmit = (evt: FormEvent) => {
+    evt.preventDefault()
+    appDispatch(counterActions.addCounter({ initialValue }))
+  }
+
+  return (
+    <section className={sectionClassname}>
+      <h3 className={styles.heading}>Create counter</h3>
+      <form action="#" className={styles.form} onSubmit={handleSubmit}>
+        <div className="form-group">
+          <label htmlFor="input-range">initial value: {initialValue}</label>
+          <input
+            type="range"
+            name="counter-value"
+            id="counter-value"
+            min={0}
+            max={10}
+            value={initialValue}
+            onChange={({ target }) => {
+              setInitialValue(Number(target.value))
+            }}
+          />
+        </div>
+        <button type="submit">Add counter</button>
+      </form>
+    </section>
+  )
+}