React 18 + redux toolkit template

.github/workflows/nodejs.yml

@@ -0,0 +1,31 @@
+# This workflow will do a clean install of node dependencies, build the source code and run tests across different versions of node
+# For more information see: https://help.github.com/actions/language-and-framework-guides/using-nodejs-with-github-actions
+
+name: Node.js CI
+
+on:
+  push:
+    branches: [ development ]
+  pull_request:
+    branches: [ development ]
+
+jobs:
+  build:
+
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [10.x, 12.x]
+
+    steps:
+    - uses: actions/checkout@v2
+    - name: Use Node.js ${{ matrix.node-version }}
+      uses: actions/setup-node@v1
+      with:
+        node-version: ${{ matrix.node-version }}
+    - run: npm ci
+    - run: npm run build --if-present
+    - run: npm test
+      env:
+        CI: true

.gitignore

@@ -21,3 +21,108 @@
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+lerna-debug.log*
+
+# Diagnostic reports (https://nodejs.org/api/report.html)
+report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
+
+# Runtime data
+pids
+*.pid
+*.seed
+*.pid.lock
+
+# Directory for instrumented libs generated by jscoverage/JSCover
+lib-cov
+
+# Coverage directory used by tools like istanbul
+coverage
+*.lcov
+
+# nyc test coverage
+.nyc_output
+
+# Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
+.grunt
+
+# Bower dependency directory (https://bower.io/)
+bower_components
+
+# node-waf configuration
+.lock-wscript
+
+# Compiled binary addons (https://nodejs.org/api/addons.html)
+build/Release
+
+# Dependency directories
+node_modules/
+jspm_packages/
+
+# TypeScript v1 declaration files
+typings/
+
+# TypeScript cache
+*.tsbuildinfo
+
+# Optional npm cache directory
+.npm
+
+# Optional eslint cache
+.eslintcache
+
+# Microbundle cache
+.rpt2_cache/
+.rts2_cache_cjs/
+.rts2_cache_es/
+.rts2_cache_umd/
+
+# Optional REPL history
+.node_repl_history
+
+# Output of 'npm pack'
+*.tgz
+
+# Yarn Integrity file
+.yarn-integrity
+
+# dotenv environment variables file
+.env
+.env.test
+
+# parcel-bundler cache (https://parceljs.org/)
+.cache
+
+# Next.js build output
+.next
+
+# Nuxt.js build / generate output
+.nuxt
+dist
+
+# Gatsby files
+.cache/
+# Comment in the public line in if your project uses Gatsby and *not* Next.js
+# https://nextjs.org/blog/next-9-1#public-directory-support
+# public
+
+# vuepress build output
+.vuepress/dist
+
+# Serverless directories
+.serverless/
+
+# FuseBox cache
+.fusebox/
+
+# DynamoDB Local files
+.dynamodb/
+
+# TernJS port file
+.tern-port

package.json

@@ -34,5 +34,8 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "devDependencies": {
+    "plop": "^3.1.2"
   }
 }

plop-templates/Component/Component.component.scss.hbs

@@ -0,0 +1,3 @@
+.c-{{pascalCase name}} {
+  
+}

plop-templates/Component/Component.jsx.hbs

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./{{pascalCase name}}.component.scss";
+
+const {{pascalCase name}} = props => {
+  return (
+    <div className="c-{{pascalCase name}}">
+      In Component {{pascalCase name}}
+    </div>
+  );
+};
+
+{{pascalCase name}}.propTypes = {
+
+};
+
+export default {{pascalCase name}};

plop-templates/Component/Component.test.js.hbs

@@ -0,0 +1,8 @@
+import React from "react";
+import {{pascalCase name}} from "./{{pascalCase name}}";
+
+describe("{{pascalCase name}}", () => {
+   it("renders without error", () => {
+
+   });
+});

plop-templates/Component/index.js.hbs

@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "./{{pascalCase name}}.jsx";
+
+export default {{pascalCase name}};

plop-templates/Page/Page.jsx.hbs

@@ -0,0 +1,17 @@
+import React from "react";
+import PropTypes from "prop-types";
+import "./{{pascalCase name}}.module.scss";
+
+const {{pascalCase name}} = props => {
+  return (
+    <div className="c-{{pascalCase name}}">
+      In Page {{pascalCase name}}
+    </div>
+  );
+};
+
+{{pascalCase name}}.propTypes = {
+
+};
+
+export default {{pascalCase name}};

plop-templates/Page/Page.module.scss.hbs

@@ -0,0 +1,3 @@
+.c-{{pascalCase name}} {
+  
+}

plop-templates/Page/Page.test.js.hbs

@@ -0,0 +1,8 @@
+import React from "react";
+import {{pascalCase name}} from "./{{pascalCase name}}";
+
+describe("{{pascalCase name}}", () => {
+   it("renders without error", () => {
+
+   });
+});

plop-templates/Page/actions.js.hbs

@@ -0,0 +1,16 @@
+export const UPDATE_FORM_VALUES = "UPDATE_{{constantCase name}}_FORM_VALUES"
+export const UPDATE_FORM_ERRORS = "UPDATE_{{constantCase name}}_FORM_ERRORS"
+
+export const updateFormValues = (formValues) => {
+    return {
+        type: UPDATE_FORM_VALUES,
+        payload: formValues
+    }
+}
+
+export const updateFormErrors = (formErrors) => {
+    return {
+        type: UPDATE_FORM_ERRORS,
+        payload: formErrors
+    }
+}

plop-templates/Page/index.js.hbs

@@ -0,0 +1,3 @@
+import {{pascalCase name}} from "./{{pascalCase name}}.jsx";
+
+export default {{pascalCase name}};

plop-templates/Page/reducer.js.hbs

@@ -0,0 +1,16 @@
+import Immutable from "immutable"
+import {UPDATE_FORM_ERRORS, UPDATE_FORM_VALUES} from "./actions"
+
+const initialState = Immutable.Map()
+
+const reducer = (state = initialState, action) => {
+    switch (action.type) {
+        case UPDATE_FORM_ERRORS:
+        case UPDATE_FORM_VALUES:
+            return state.mergeDeep(action.payload)
+        default:
+            return state
+    }
+}
+
+export default reducer

plop-templates/Page/selectors.js.hbs

@@ -0,0 +1,14 @@
+import {createSelector} from "reselect"
+import {createGetSelector} from "reselect-immutable-helpers"
+
+const getData = ({data}) => data
+
+export const get{{pascalCase name}} = createSelector(
+    getData,
+    (dataState) => {
+        return dataState.pages.{{camelCase name}}
+    }
+)
+
+export const getFormErrors = createGetSelector(get{{pascalCase name}}, "formErrors")
+export const getFormValues = createGetSelector(get{{pascalCase name}}, "formValues")

plop-templates/hook.js.hbs

@@ -0,0 +1,5 @@
+const {{camelCase name}} = () => {
+
+};
+
+export default {{camelCase name}};

plop-templates/injectable-index.js.hbs

@@ -0,0 +1,5 @@
+/* PLOP_INJECT_IMPORT */
+
+export {
+  /* PLOP_INJECT_EXPORT */
+}

plop-templates/service.js.hbs

@@ -0,0 +1,17 @@
+const create{{pascalCase name}} = () => {
+  let examplePrivateVariable = 0
+
+  return {
+    getExamplePrivateVariable: () => {
+      return examplePrivateVariable
+    },
+    setExamplePrivateVariable: (n) => {
+      examplePrivateVariable = n
+    }
+  }
+};
+
+const singleton = create{{pascalCase name}}();
+Object.freeze(singleton);
+
+export default singleton;

plopfile.js

@@ -0,0 +1,210 @@
+module.exports = plop => {
+    plop.setGenerator('component', {
+      description: 'Create a component',
+      // User input prompts provided as arguments to the template
+      prompts: [
+        {
+          // Raw text input
+          type: 'input',
+          // Variable name for this input
+          name: 'name',
+          // Prompt to display on command line
+          message: 'What is your component name?'
+        },
+      ],
+      actions: [
+        {
+          type: 'add',
+          // Plop will create directories for us if they do not exist
+          // so it's okay to add files in nested locations.
+          path: 'src/app/components/{{pascalCase name}}/{{pascalCase name}}.jsx',
+          templateFile:
+            'plop-templates/Component/Component.jsx.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/components/{{pascalCase name}}/{{pascalCase name}}.test.js',
+          templateFile:
+            'plop-templates/Component/Component.test.js.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            'src/app/components/{{pascalCase name}}/{{pascalCase name}}.component.scss',
+          templateFile:
+            'plop-templates/Component/Component.component.scss.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/components/{{pascalCase name}}/index.js',
+          templateFile: 'plop-templates/Component/index.js.hbs',
+        },
+        {
+          // Adds an index.js file if it does not already exist
+          type: 'add',
+          path: 'src/app/components/index.js',
+          templateFile: 'plop-templates/injectable-index.js.hbs',
+          // If index.js already exists in this location, skip this action
+          skipIfExists: true,
+        },
+        {
+          // Action type 'append' injects a template into an existing file
+          type: 'append',
+          path: 'src/app/components/index.js',
+          // Pattern tells plop where in the file to inject the template
+          pattern: `/* PLOP_INJECT_IMPORT */`,
+          template: `import {{pascalCase name}} from './{{pascalCase name}}';`,
+        },
+        {
+          type: 'append',
+          path: 'src/app/components/index.js',
+          pattern: `/* PLOP_INJECT_EXPORT */`,
+          template: `\t{{pascalCase name}},`,
+        },
+      ],
+    });
+    plop.setGenerator('page', {
+      description: 'Create a page',
+      prompts: [
+        {
+          type: 'input',
+          name: 'name',
+          message: 'What is your page name?',
+        },
+      ],
+      actions: [
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.jsx',
+          templateFile:
+            'plop-templates/Page/Page.jsx.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.test.js',
+          templateFile:
+            'plop-templates/Page/Page.test.js.hbs',
+        },
+        {
+          type: 'add',
+          path:
+            'src/app/pages/{{pascalCase name}}/{{pascalCase name}}.module.scss',
+          templateFile:
+            'plop-templates/Page/Page.module.scss.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/reducer.js',
+          templateFile: 'plop-templates/Page/reducer.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/selectors.js',
+          templateFile: 'plop-templates/Page/selectors.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/actions.js',
+          templateFile: 'plop-templates/Page/actions.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/{{pascalCase name}}/index.js',
+          templateFile: 'plop-templates/Page/index.js.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/app/pages/index.js',
+          templateFile: 'plop-templates/injectable-index.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'append',
+          path: 'src/app/pages/index.js',
+          pattern: `/* PLOP_INJECT_IMPORT */`,
+          template: `import {{pascalCase name}} from './{{pascalCase name}}';`,
+        },
+        {
+          type: 'append',
+          path: 'src/app/pages/index.js',
+          pattern: `/* PLOP_INJECT_EXPORT */`,
+          template: `\t{{pascalCase name}},`,
+        },
+      ],
+    })
+  
+    plop.setGenerator('service', {
+      description: 'Create service',
+      prompts: [
+        {
+          type: 'input',
+          name: 'name',
+          message: 'What is your service name?',
+        },
+      ],
+      actions: [
+        {
+          type: 'add',
+          path: 'src/services/{{camelCase name}}.js',
+          templateFile: 'plop-templates/service.js.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/services/index.js',
+          templateFile: 'plop-templates/injectable-index.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'append',
+          path: 'src/services/index.js',
+          pattern: `/* PLOP_INJECT_IMPORT */`,
+          template: `import {{camelCase name}} from './{{camelCase name}}';`,
+        },
+        {
+          type: 'append',
+          path: 'src/services/index.js',
+          pattern: `/* PLOP_INJECT_EXPORT */`,
+          template: `\t{{camelCase name}},`,
+        }
+      ],
+    })
+  
+    plop.setGenerator('hook', {
+      description: 'Create a custom react hook',
+      prompts: [
+        {
+          type: 'input',
+          name: 'name',
+          message: 'What is your hook name?',
+        },
+      ],
+      actions: [
+        {
+          type: 'add',
+          path: 'src/hooks/{{camelCase name}}.js',
+          templateFile: 'plop-templates/hook.js.hbs',
+        },
+        {
+          type: 'add',
+          path: 'src/hooks/index.js',
+          templateFile: 'plop-templates/injectable-index.js.hbs',
+          skipIfExists: true,
+        },
+        {
+          type: 'append',
+          path: 'src/hooks/index.js',
+          pattern: `/* PLOP_INJECT_IMPORT */`,
+          template: `import {{camelCase name}} from './{{camelCase name}}';`,
+        },
+        {
+          type: 'append',
+          path: 'src/hooks/index.js',
+          pattern: `/* PLOP_INJECT_EXPORT */`,
+          template: `\t{{camelCase name}},`,
+        }
+      ],
+    })
+  };

src/App.css

@@ -9,30 +9,31 @@
 
 @media (prefers-reduced-motion: no-preference) {
   .App-logo {
-    animation: App-logo-spin infinite 20s linear;
+    animation: App-logo-float infinite 3s ease-in-out;
   }
 }
 
 .App-header {
-  background-color: #282c34;
   min-height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   font-size: calc(10px + 2vmin);
-  color: white;
 }
 
 .App-link {
-  color: #61dafb;
+  color: rgb(112, 76, 182);
 }
 
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
+@keyframes App-logo-float {
+  0% {
+    transform: translateY(0);
   }
-  to {
-    transform: rotate(360deg);
+  50% {
+    transform: translateY(10px);
+  }
+  100% {
+    transform: translateY(0px);
   }
 }

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;

src/App.test.js

@@ -1,8 +0,0 @@
-import { render, screen } from '@testing-library/react';
-import App from './App';
-
-test('renders learn react link', () => {
-  render(<App />);
-  const linkElement = screen.getByText(/learn react/i);
-  expect(linkElement).toBeInTheDocument();
-});

src/App.test.tsx

@@ -0,0 +1,14 @@
+import { render } from "@testing-library/react"
+import { Provider } from "react-redux"
+import { store } from "./app/store"
+import App from "./App"
+
+test("renders learn react link", () => {
+  const { getByText } = render(
+    <Provider store={store}>
+      <App />
+    </Provider>,
+  )
+
+  expect(getByText(/learn/i)).toBeInTheDocument()
+})

src/App.tsx

@@ -0,0 +1,19 @@
+import logo from "./logo.svg"
+import { Counter } from "./features/counter/Counter"
+import "./App.css"
+
+function App() {
+  return (
+    <div className="App">
+      <header className="App-header">
+        <img src={logo} className="App-logo" alt="logo" />
+        <Counter />
+        <p>
+          Edit <code>src/App.tsx</code> and save to reload.
+        </p>
+      </header>
+    </div>
+  )
+}
+
+export default App

src/app/hooks.ts

@@ -0,0 +1,6 @@
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux"
+import type { RootState, AppDispatch } from "./store"
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch: () => AppDispatch = useDispatch
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector

src/app/store.ts

@@ -0,0 +1,17 @@
+import { configureStore, ThunkAction, Action } from "@reduxjs/toolkit"
+import counterReducer from "../features/counter/counterSlice"
+
+export const store = configureStore({
+  reducer: {
+    counter: counterReducer,
+  },
+})
+
+export type AppDispatch = typeof store.dispatch
+export type RootState = ReturnType<typeof store.getState>
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>

src/features/counter/Counter.module.css

@@ -0,0 +1,79 @@
+.row {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.row > button {
+  margin-left: 4px;
+  margin-right: 8px;
+}
+
+.row:not(:last-child) {
+  margin-bottom: 16px;
+}
+
+.value {
+  font-size: 78px;
+  padding-left: 16px;
+  padding-right: 16px;
+  margin-top: 2px;
+  font-family: "Courier New", Courier, monospace;
+}
+
+.button {
+  appearance: none;
+  background: none;
+  font-size: 32px;
+  padding-left: 12px;
+  padding-right: 12px;
+  outline: none;
+  border: 2px solid transparent;
+  color: rgb(112, 76, 182);
+  padding-bottom: 4px;
+  cursor: pointer;
+  background-color: rgba(112, 76, 182, 0.1);
+  border-radius: 2px;
+  transition: all 0.15s;
+}
+
+.textbox {
+  font-size: 32px;
+  padding: 2px;
+  width: 64px;
+  text-align: center;
+  margin-right: 4px;
+}
+
+.button:hover,
+.button:focus {
+  border: 2px solid rgba(112, 76, 182, 0.4);
+}
+
+.button:active {
+  background-color: rgba(112, 76, 182, 0.2);
+}
+
+.asyncButton {
+  composes: button;
+  position: relative;
+}
+
+.asyncButton:after {
+  content: "";
+  background-color: rgba(112, 76, 182, 0.15);
+  display: block;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  left: 0;
+  top: 0;
+  opacity: 0;
+  transition: width 1s linear, opacity 0.5s ease 1s;
+}
+
+.asyncButton:active:after {
+  width: 0%;
+  opacity: 1;
+  transition: 0s;
+}

src/features/counter/Counter.tsx

@@ -0,0 +1,68 @@
+import { useState } from "react"
+
+import { useAppSelector, useAppDispatch } from "../../app/hooks"
+import {
+  decrement,
+  increment,
+  incrementByAmount,
+  incrementAsync,
+  incrementIfOdd,
+  selectCount,
+} from "./counterSlice"
+import styles from "./Counter.module.css"
+
+export function Counter() {
+  const count = useAppSelector(selectCount)
+  const dispatch = useAppDispatch()
+  const [incrementAmount, setIncrementAmount] = useState("2")
+
+  const incrementValue = Number(incrementAmount) || 0
+
+  return (
+    <div>
+      <div className={styles.row}>
+        <button
+          className={styles.button}
+          aria-label="Decrement value"
+          onClick={() => dispatch(decrement())}
+        >
+          -
+        </button>
+        <span className={styles.value}>{count}</span>
+        <button
+          className={styles.button}
+          aria-label="Increment value"
+          onClick={() => dispatch(increment())}
+        >
+          +
+        </button>
+      </div>
+      <div className={styles.row}>
+        <input
+          className={styles.textbox}
+          aria-label="Set increment amount"
+          value={incrementAmount}
+          onChange={(e) => setIncrementAmount(e.target.value)}
+        />
+        <button
+          className={styles.button}
+          onClick={() => dispatch(incrementByAmount(incrementValue))}
+        >
+          Add Amount
+        </button>
+        <button
+          className={styles.asyncButton}
+          onClick={() => dispatch(incrementAsync(incrementValue))}
+        >
+          Add Async
+        </button>
+        <button
+          className={styles.button}
+          onClick={() => dispatch(incrementIfOdd(incrementValue))}
+        >
+          Add If Odd
+        </button>
+      </div>
+    </div>
+  )
+}

src/features/counter/counterAPI.ts

@@ -0,0 +1,6 @@
+// A mock function to mimic making an async request for data
+export function fetchCount(amount = 1) {
+  return new Promise<{ data: number }>((resolve) =>
+    setTimeout(() => resolve({ data: amount }), 500),
+  )
+}

src/features/counter/counterSlice.spec.ts

@@ -0,0 +1,34 @@
+import counterReducer, {
+  CounterState,
+  increment,
+  decrement,
+  incrementByAmount,
+} from "./counterSlice"
+
+describe("counter reducer", () => {
+  const initialState: CounterState = {
+    value: 3,
+    status: "idle",
+  }
+  it("should handle initial state", () => {
+    expect(counterReducer(undefined, { type: "unknown" })).toEqual({
+      value: 0,
+      status: "idle",
+    })
+  })
+
+  it("should handle increment", () => {
+    const actual = counterReducer(initialState, increment())
+    expect(actual.value).toEqual(4)
+  })
+
+  it("should handle decrement", () => {
+    const actual = counterReducer(initialState, decrement())
+    expect(actual.value).toEqual(2)
+  })
+
+  it("should handle incrementByAmount", () => {
+    const actual = counterReducer(initialState, incrementByAmount(2))
+    expect(actual.value).toEqual(5)
+  })
+})

src/features/counter/counterSlice.ts

@@ -0,0 +1,84 @@
+import { createAsyncThunk, createSlice, PayloadAction } from "@reduxjs/toolkit"
+import { RootState, AppThunk } from "../../app/store"
+import { fetchCount } from "./counterAPI"
+
+export interface CounterState {
+  value: number
+  status: "idle" | "loading" | "failed"
+}
+
+const initialState: CounterState = {
+  value: 0,
+  status: "idle",
+}
+
+// The function below is called a thunk and allows us to perform async logic. It
+// can be dispatched like a regular action: `dispatch(incrementAsync(10))`. This
+// will call the thunk with the `dispatch` function as the first argument. Async
+// code can then be executed and other actions can be dispatched. Thunks are
+// typically used to make async requests.
+export const incrementAsync = createAsyncThunk(
+  "counter/fetchCount",
+  async (amount: number) => {
+    const response = await fetchCount(amount)
+    // The value we return becomes the `fulfilled` action payload
+    return response.data
+  },
+)
+
+export const counterSlice = createSlice({
+  name: "counter",
+  initialState,
+  // The `reducers` field lets us define reducers and generate associated actions
+  reducers: {
+    increment: (state) => {
+      // Redux Toolkit allows us to write "mutating" logic in reducers. It
+      // doesn't actually mutate the state because it uses the Immer library,
+      // which detects changes to a "draft state" and produces a brand new
+      // immutable state based off those changes
+      state.value += 1
+    },
+    decrement: (state) => {
+      state.value -= 1
+    },
+    // Use the PayloadAction type to declare the contents of `action.payload`
+    incrementByAmount: (state, action: PayloadAction<number>) => {
+      state.value += action.payload
+    },
+  },
+  // The `extraReducers` field lets the slice handle actions defined elsewhere,
+  // including actions generated by createAsyncThunk or in other slices.
+  extraReducers: (builder) => {
+    builder
+      .addCase(incrementAsync.pending, (state) => {
+        state.status = "loading"
+      })
+      .addCase(incrementAsync.fulfilled, (state, action) => {
+        state.status = "idle"
+        state.value += action.payload
+      })
+      .addCase(incrementAsync.rejected, (state) => {
+        state.status = "failed"
+      })
+  },
+})
+
+export const { increment, decrement, incrementByAmount } = counterSlice.actions
+
+// The function below is called a selector and allows us to select a value from
+// the state. Selectors can also be defined inline where they're used instead of
+// in the slice file. For example: `useSelector((state: RootState) => state.counter.value)`
+export const selectCount = (state: RootState) => state.counter.value
+
+// We can also write thunks by hand, which may contain both sync and async logic.
+// Here's an example of conditionally dispatching actions based on current state.
+export const incrementIfOdd =
+  (amount: number): AppThunk =>
+  (dispatch, getState) => {
+    const currentValue = selectCount(getState())
+    if (currentValue % 2 === 1) {
+      dispatch(incrementByAmount(amount))
+    }
+  }
+
+export default counterSlice.reducer

src/index.css

@@ -1,13 +1,13 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
+    "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
     sans-serif;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
 
 code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+  font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }

src/index.js

@@ -1,17 +0,0 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
-
-const root = ReactDOM.createRoot(document.getElementById('root'));
-root.render(
-  <React.StrictMode>
-    <App />
-  </React.StrictMode>
-);
-
-// If you want to start measuring performance in your app, pass a function
-// to log results (for example: reportWebVitals(console.log))
-// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
-reportWebVitals();

src/logo.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><g fill="#764ABC"><path d="M65.6 65.4c2.9-.3 5.1-2.8 5-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 1.5.7 2.8 1.6 3.7-3.4 6.7-8.6 11.6-16.4 15.7-5.3 2.8-10.8 3.8-16.3 3.1-4.5-.6-8-2.6-10.2-5.9-3.2-4.9-3.5-10.2-.8-15.5 1.9-3.8 4.9-6.6 6.8-8-.4-1.3-1-3.5-1.3-5.1-14.5 10.5-13 24.7-8.6 31.4 3.3 5 10 8.1 17.4 8.1 2 0 4-.2 6-.7 12.8-2.5 22.5-10.1 28-21.4z"/><path d="M83.2 53c-7.6-8.9-18.8-13.8-31.6-13.8H50c-.9-1.8-2.8-3-4.9-3h-.2c-3.1.1-5.5 2.7-5.4 5.8.1 3 2.6 5.4 5.6 5.4h.2c2.2-.1 4.1-1.5 4.9-3.4H52c7.6 0 14.8 2.2 21.3 6.5 5 3.3 8.6 7.6 10.6 12.8 1.7 4.2 1.6 8.3-.2 11.8-2.8 5.3-7.5 8.2-13.7 8.2-4 0-7.8-1.2-9.8-2.1-1.1 1-3.1 2.6-4.5 3.6 4.3 2 8.7 3.1 12.9 3.1 9.6 0 16.7-5.3 19.4-10.6 2.9-5.8 2.7-15.8-4.8-24.3z"/><path d="M32.4 67.1c.1 3 2.6 5.4 5.6 5.4h.2c3.1-.1 5.5-2.7 5.4-5.8-.1-3-2.6-5.4-5.6-5.4h-.2c-.2 0-.5 0-.7.1-4.1-6.8-5.8-14.2-5.2-22.2.4-6 2.4-11.2 5.9-15.5 2.9-3.7 8.5-5.5 12.3-5.6 10.6-.2 15.1 13 15.4 18.3 1.3.3 3.5 1 5 1.5-1.2-16.2-11.2-24.6-20.8-24.6-9 0-17.3 6.5-20.6 16.1-4.6 12.8-1.6 25.1 4 34.8-.5.7-.8 1.8-.7 2.9z"/></g></svg>

src/main.tsx

@@ -0,0 +1,14 @@
+import React from "react"
+import ReactDOM from "react-dom/client"
+import { Provider } from "react-redux"
+import { store } from "./app/store"
+import App from "./App"
+import "./index.css"
+
+ReactDOM.createRoot(document.getElementById("root")!).render(
+  <React.StrictMode>
+    <Provider store={store}>
+      <App />
+    </Provider>
+  </React.StrictMode>,
+)

src/reportWebVitals.js

@@ -1,13 +0,0 @@
-const reportWebVitals = onPerfEntry => {
-  if (onPerfEntry && onPerfEntry instanceof Function) {
-    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
-      getCLS(onPerfEntry);
-      getFID(onPerfEntry);
-      getFCP(onPerfEntry);
-      getLCP(onPerfEntry);
-      getTTFB(onPerfEntry);
-    });
-  }
-};
-
-export default reportWebVitals;

src/setupTests.js

@@ -1,5 +0,0 @@
-// jest-dom adds custom jest matchers for asserting on DOM nodes.
-// allows you to do things like:
-// expect(element).toHaveTextContent(/react/i)
-// learn more: https://github.com/testing-library/jest-dom
-import '@testing-library/jest-dom';

src/setupTests.ts

@@ -0,0 +1,2 @@
+/// <reference types="vitest/globals" />
+import "@testing-library/jest-dom"

tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ESNext",
+    "useDefineForClassFields": true,
+    "lib": ["DOM", "DOM.Iterable", "ESNext"],
+    "allowJs": false,
+    "skipLibCheck": true,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["testing-library__jest-dom"]
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

tsconfig.node.json

@@ -0,0 +1,9 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true
+  },
+  "include": ["vite.config.ts"]
+}