+ )
+}
diff --git a/examples/lazy-injection/kitchen-sink/src/features/counter/counterAPI.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterAPI.ts
new file mode 100644
index 0000000000..aca3ef6031
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/counter/counterAPI.ts
@@ -0,0 +1,6 @@
+// A mock function to mimic making an async request for data
+export const fetchCount = (amount = 1) => {
+ return new Promise<{ data: number }>(resolve =>
+ setTimeout(() => resolve({ data: amount }), 500),
+ )
+}
diff --git a/examples/lazy-injection/kitchen-sink/src/features/counter/counterMiddleware.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterMiddleware.ts
new file mode 100644
index 0000000000..64914c4d65
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/counter/counterMiddleware.ts
@@ -0,0 +1,15 @@
+import type { Middleware } from "@reduxjs/toolkit"
+import { getCount, selectCount } from "./counterSlice"
+
+export const counterMiddleware: Middleware<{
+ (action: ReturnType): number
+}> = api => {
+ console.log("counter middleware initialised!")
+ return next => action => {
+ const result = next(action)
+ if (getCount.match(action)) {
+ return selectCount(api.getState())
+ }
+ return result
+ }
+}
diff --git a/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts
new file mode 100644
index 0000000000..e30b91a1a2
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.test.ts
@@ -0,0 +1,53 @@
+import { makeStore } from "../../app/store"
+import type { CounterSliceState } from "./counterSlice"
+import {
+ counterSlice,
+ decrement,
+ increment,
+ incrementByAmount,
+ selectCount,
+} from "./counterSlice"
+
+describe("counter reducer", it => {
+ let store = makeStore()
+
+ beforeEach(() => {
+ const initialState: CounterSliceState = {
+ value: 3,
+ status: "idle",
+ }
+
+ store = makeStore({ counter: initialState })
+ })
+
+ it("should handle initial state", () => {
+ expect(counterSlice.reducer(undefined, { type: "unknown" })).toStrictEqual({
+ value: 0,
+ status: "idle",
+ })
+ })
+
+ it("should handle increment", () => {
+ expect(selectCount(store.getState())).toBe(3)
+
+ store.dispatch(increment())
+
+ expect(selectCount(store.getState())).toBe(4)
+ })
+
+ it("should handle decrement", () => {
+ expect(selectCount(store.getState())).toBe(3)
+
+ store.dispatch(decrement())
+
+ expect(selectCount(store.getState())).toBe(2)
+ })
+
+ it("should handle incrementByAmount", () => {
+ expect(selectCount(store.getState())).toBe(3)
+
+ store.dispatch(incrementByAmount(2))
+
+ expect(selectCount(store.getState())).toBe(5)
+ })
+})
diff --git a/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts
new file mode 100644
index 0000000000..c66297e733
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/counter/counterSlice.ts
@@ -0,0 +1,109 @@
+import type { PayloadAction, WithSlice } from "@reduxjs/toolkit"
+import { createAppSlice } from "../../app/createAppSlice"
+import type { AppThunk } from "../../app/store"
+import { fetchCount } from "./counterAPI"
+import { rootReducer } from "../../app/reducer"
+
+export interface CounterSliceState {
+ value: number
+ status: "idle" | "loading" | "failed"
+}
+
+const initialState: CounterSliceState = {
+ value: 0,
+ status: "idle",
+}
+
+export const counterSlice = createAppSlice({
+ name: "counter",
+ // `createSlice` will infer the state type from the `initialState` argument
+ initialState,
+ // The `reducers` field lets us define reducers and generate associated actions
+ reducers: create => ({
+ getCount: create.reducer(() => {
+ // dummy for middleware
+ }),
+ increment: create.reducer(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: create.reducer(state => {
+ state.value -= 1
+ }),
+ // Use the `PayloadAction` type to declare the contents of `action.payload`
+ incrementByAmount: create.reducer(
+ (state, action: PayloadAction) => {
+ state.value += action.payload
+ },
+ ),
+ // 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.
+ incrementAsync: create.asyncThunk(
+ async (amount: number) => {
+ const response = await fetchCount(amount)
+ // The value we return becomes the `fulfilled` action payload
+ return response.data
+ },
+ {
+ pending: state => {
+ state.status = "loading"
+ },
+ fulfilled: (state, action) => {
+ state.status = "idle"
+ state.value += action.payload
+ },
+ rejected: state => {
+ state.status = "failed"
+ },
+ },
+ ),
+ }),
+ // You can define your selectors here. These selectors receive the slice
+ // state as their first argument.
+ selectors: {
+ selectCount: counter => counter.value,
+ selectStatus: counter => counter.status,
+ },
+})
+
+// Action creators are generated for each case reducer function.
+export const {
+ getCount,
+ decrement,
+ increment,
+ incrementByAmount,
+ incrementAsync,
+} = counterSlice.actions
+
+// we can call both inject and injectInto, because the reducer reference is the same - injection only happens once regardless
+const withCounterSlice = rootReducer.inject(counterSlice)
+const injectedCounterSlice = counterSlice.injectInto(rootReducer)
+
+declare module "../../app/reducer" {
+ export interface LazyLoadedSlices extends WithSlice {}
+}
+
+// Selectors returned by `slice.selectors` take the root state as their first argument.
+export const { selectCount, selectStatus } = injectedCounterSlice.selectors
+
+// 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 || currentValue % 2 === -1) {
+ dispatch(incrementByAmount(amount))
+ }
+ }
+
+export const selectDouble = withCounterSlice.selector(
+ state => selectCount(state) * 2,
+)
diff --git a/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css b/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css
new file mode 100644
index 0000000000..99384c45bc
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.module.css
@@ -0,0 +1,20 @@
+.select {
+ font-size: 24px;
+ padding: 5px;
+ padding-top: 2px;
+ padding-bottom: 2px;
+ size: 50;
+ outline: none;
+ border: 2px solid transparent;
+ color: rgb(112, 76, 182);
+ cursor: pointer;
+ background-color: rgba(112, 76, 182, 0.1);
+ border-radius: 5px;
+ transition: all 0.15s;
+}
+
+.container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
diff --git a/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.tsx b/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.tsx
new file mode 100644
index 0000000000..c490c4a787
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/quotes/Quotes.tsx
@@ -0,0 +1,59 @@
+import { useState } from "react"
+import styles from "./Quotes.module.css"
+import { useGetQuotesQuery } from "./quotesApiSlice"
+
+const options = [5, 10, 20, 30]
+
+export const Quotes = () => {
+ const [numberOfQuotes, setNumberOfQuotes] = useState(10)
+ // Using a query hook automatically fetches data and returns query values
+ const { data, isError, isLoading, isSuccess } =
+ useGetQuotesQuery(numberOfQuotes)
+
+ if (isError) {
+ return (
+
+
There was an error!!!
+
+ )
+ }
+
+ if (isLoading) {
+ return (
+
+
Loading...
+
+ )
+ }
+
+ if (isSuccess) {
+ return (
+
+
Select the Quantity of Quotes to Fetch:
+
+ {data.quotes.map(({ author, quote, id }) => (
+
+ “{quote}”
+
+
+ ))}
+
+ )
+ }
+
+ return null
+}
diff --git a/examples/lazy-injection/kitchen-sink/src/features/quotes/quotesApiSlice.ts b/examples/lazy-injection/kitchen-sink/src/features/quotes/quotesApiSlice.ts
new file mode 100644
index 0000000000..d8b5de9dde
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/quotes/quotesApiSlice.ts
@@ -0,0 +1,53 @@
+// Need to use the React-specific entry point to import `createApi`
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react"
+import { addAppMiddleware } from "../../app/middleware"
+import type { WithSlice } from "@reduxjs/toolkit"
+import { rootReducer } from "../../app/reducer"
+
+interface Quote {
+ id: number
+ quote: string
+ author: string
+}
+
+interface QuotesApiResponse {
+ quotes: Quote[]
+ total: number
+ skip: number
+ limit: number
+}
+
+// Define a service using a base URL and expected endpoints
+export const quotesApiSlice = createApi({
+ baseQuery: fetchBaseQuery({ baseUrl: "https://dummyjson.com/quotes" }),
+ reducerPath: "quotesApi",
+ // Tag types are used for caching and invalidation.
+ tagTypes: ["Quotes"],
+ endpoints: build => ({
+ // Supply generics for the return type (in this case `QuotesApiResponse`)
+ // and the expected query argument. If there is no argument, use `void`
+ // for the argument type instead.
+ getQuotes: build.query({
+ query: (limit = 10) => `?limit=${limit}`,
+ // `providesTags` determines which 'tag' is attached to the
+ // cached data returned by the query.
+ providesTags: (result, error, id) => [{ type: "Quotes", id }],
+ }),
+ }),
+})
+
+// Hooks are auto-generated by RTK-Query
+// Same as `quotesApiSlice.endpoints.getQuotes.useQuery`
+export const { useGetQuotesQuery } = quotesApiSlice
+
+declare module "../../app/reducer" {
+ export interface LazyLoadedSlices extends WithSlice {}
+}
+
+const withQuotesApi = rootReducer.inject(quotesApiSlice)
+
+// middleware typing mismatch here
+// the API middleware needs a guarantee that the reducer has already been injected
+// addAppMiddleware can't confirm this, but we can (the injection happens above)
+// sooo... we'll just cast it to any
+addAppMiddleware(quotesApiSlice.middleware as any)
diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/AddComment.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/AddComment.tsx
new file mode 100644
index 0000000000..1f6f1b8259
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/todos/AddComment.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react"
+import styles from "./Todos.module.css"
+import { useAppDispatch } from "../../app/hooks"
+import { addComment } from "./commentSlice"
+
+export function AddComment({ todoId }: { todoId: string }) {
+ const dispatch = useAppDispatch()
+ const [message, setMessage] = useState("")
+ return (
+
+ setMessage(e.target.value)} />
+
+
+ )
+}
diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/AddTodo.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/AddTodo.tsx
new file mode 100644
index 0000000000..f72ecc5efc
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/todos/AddTodo.tsx
@@ -0,0 +1,24 @@
+import { useState } from "react"
+import styles from "./Todos.module.css"
+import { useAppDispatch } from "../../app/hooks"
+import { addTodo } from "./todoSlice"
+
+export function AddTodo() {
+ const dispatch = useAppDispatch()
+ const [title, setTitle] = useState("")
+ return (
+
+ setTitle(e.target.value)} />
+
+
+ )
+}
diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/Comment.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/Comment.tsx
new file mode 100644
index 0000000000..0be56ca16e
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/todos/Comment.tsx
@@ -0,0 +1,20 @@
+import { useAppDispatch } from "../../app/hooks"
+import { deleteComment, type Comment } from "./commentSlice"
+import styles from "./Todos.module.css"
+
+export function CommentDisplay({ comment }: { comment: Comment }) {
+ const dispatch = useAppDispatch()
+ return (
+
+
{comment.message}
+
+
+ )
+}
diff --git a/examples/lazy-injection/kitchen-sink/src/features/todos/Todo.tsx b/examples/lazy-injection/kitchen-sink/src/features/todos/Todo.tsx
new file mode 100644
index 0000000000..fa24ee3307
--- /dev/null
+++ b/examples/lazy-injection/kitchen-sink/src/features/todos/Todo.tsx
@@ -0,0 +1,31 @@
+import { useAppDispatch, useAppSelector } from "../../app/hooks"
+import { deleteTodo, selectTodoById } from "./todoSlice"
+import styles from "./Todos.module.css"
+import { AddComment } from "./AddComment"
+import { selectCommentsByTodoId } from "./commentSlice"
+import { CommentDisplay } from "./Comment"
+
+export function Todo({ id }: { id: string }) {
+ const dispatch = useAppDispatch()
+ const todo = useAppSelector(state => selectTodoById(state, id))
+ const comments = useAppSelector(state => selectCommentsByTodoId(state, id))
+ if (!todo) return null
+ return (
+