@depup/reduxjs__toolkit 2.12.0-depup.28

package/skills/build-modern-redux-apps/modern-redux/references/store-lifetime.md

@@ -0,0 +1,53 @@
+# Store Lifetime
+
+## Decision table
+
+| Environment | Default store shape | Why |
+| --- | --- | --- |
+| Client-only SPA | One module-level singleton store | There is one browser session and no cross-request leakage risk. |
+| SSR-heavy React app | `makeStore()` plus provider-local state | Each request needs its own store instance, but that instance must stay stable across client renders. |
+| Non-React integration code | Direct store access can be acceptable | This is outside the React context boundary and should stay out of UI components. |
+
+## SPA pattern
+
+```ts
+import { configureStore } from '@reduxjs/toolkit'
+import { postsSlice } from '../features/posts/postsSlice'
+
+export const store = configureStore({
+  reducer: {
+    posts: postsSlice.reducer,
+  },
+})
+```
+
+Use this for classic browser SPAs.
+
+## SSR-heavy React pattern
+
+```tsx
+// file: src/lib/store.ts
+import { configureStore } from '@reduxjs/toolkit'
+import { postsSlice } from '../features/posts/postsSlice'
+
+export const makeStore = () =>
+  configureStore({
+    reducer: {
+      posts: postsSlice.reducer,
+    },
+  })
+
+// file: src/app/StoreProvider.tsx
+'use client'
+
+import { useState, type ReactNode } from 'react'
+import { Provider } from 'react-redux'
+import { makeStore } from '../lib/store'
+
+export function StoreProvider({ children }: { children: ReactNode }) {
+  const [store] = useState(makeStore)
+  return <Provider store={store}>{children}</Provider>
+}
+```
+
+Create the store per request, then keep it stable inside the provider component.

package/skills/build-modern-redux-apps/redux-dataflow/SKILL.md

@@ -0,0 +1,264 @@
+---
+name: build-modern-redux-apps/redux-dataflow
+description: >
+  Use this when you need the Redux event -> reducer -> selector -> render loop,
+  event-style actions, reducer-owned state transitions, derived data, or a
+  debugging model for Redux Toolkit apps.
+type: core
+library: "@reduxjs/toolkit"
+library_version: "2.11.2"
+sources:
+  - "reduxjs/redux:docs/tutorials/fundamentals/part-2-concepts-data-flow.md"
+  - "reduxjs/redux:docs/tutorials/essentials/part-3-data-flow.md"
+  - "reduxjs/redux:docs/style-guide/style-guide.md"
+---
+
+# Redux Dataflow
+
+## Setup
+
+```ts
+import { configureStore, createSelector, createSlice } from '@reduxjs/toolkit'
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState: {
+    items: [] as { id: string; title: string; published: boolean }[],
+    filter: 'all' as 'all' | 'published',
+  },
+  reducers: {
+    postAdded(state, action: { payload: { id: string; title: string } }) {
+      state.items.push({ ...action.payload, published: false })
+    },
+    postPublished(state, action: { payload: { id: string } }) {
+      const post = state.items.find((item) => item.id === action.payload.id)
+      if (post) {
+        post.published = true
+      }
+    },
+    filterChanged(state, action: { payload: 'all' | 'published' }) {
+      state.filter = action.payload
+    },
+  },
+})
+
+const store = configureStore({
+  reducer: {
+    posts: postsSlice.reducer,
+  },
+})
+
+type RootState = ReturnType<typeof store.getState>
+
+const selectPostsState = (state: RootState) => state.posts
+const selectVisiblePosts = createSelector([selectPostsState], (postsState) =>
+  postsState.filter === 'all'
+    ? postsState.items
+    : postsState.items.filter((post) => post.published),
+)
+
+store.dispatch(postsSlice.actions.postAdded({ id: 'p1', title: 'Draft' }))
+store.dispatch(postsSlice.actions.postPublished({ id: 'p1' }))
+
+const visiblePosts = selectVisiblePosts(store.getState())
+console.log(visiblePosts)
+```
+
+## Core Patterns
+
+### Dispatch events, not setters
+
+```ts
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState: [] as { id: string; title: string }[],
+  reducers: {
+    postAdded(state, action: { payload: { id: string; title: string } }) {
+      state.push(action.payload)
+    },
+    postRemoved(state, action: { payload: { id: string } }) {
+      return state.filter((post) => post.id !== action.payload.id)
+    },
+    postUpdated(
+      state,
+      action: { payload: { id: string; changes: Partial<{ title: string }> } },
+    ) {
+      const post = state.find((item) => item.id === action.payload.id)
+      if (post && action.payload.changes.title) {
+        post.title = action.payload.changes.title
+      }
+    },
+  },
+})
+
+postsSlice.actions.postAdded({ id: 'p1', title: 'Draft' })
+```
+
+Event-style actions explain what happened in the UI instead of hiding the transition behind a generic setter.
+
+### Let reducers combine old store data with new outside data
+
+```ts
+import { createEntityAdapter, createSlice } from '@reduxjs/toolkit'
+
+const postsAdapter = createEntityAdapter<{ id: string; title: string }>()
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState: postsAdapter.getInitialState(),
+  reducers: {
+    postsReceived(state, action: { payload: { id: string; title: string }[] }) {
+      postsAdapter.upsertMany(state, action.payload)
+    },
+  },
+})
+
+const incomingPosts = [
+  { id: 'p1', title: 'Draft' },
+  { id: 'p2', title: 'Published' },
+]
+
+postsSlice.actions.postsReceived(incomingPosts)
+```
+
+If a transition mixes current store state with new external data, dispatch the new external data and let the reducer own the merge.
+
+### Derive values with selectors instead of storing duplicates
+
+```ts
+import { createSelector } from '@reduxjs/toolkit'
+
+const selectPosts = (state: RootState) => state.posts.items
+const selectFilter = (state: RootState) => state.posts.filter
+
+export const selectVisiblePosts = createSelector(
+  [selectPosts, selectFilter],
+  (posts, filter) =>
+    filter === 'all'
+      ? posts
+      : posts.filter((post) => post.published),
+)
+```
+
+Selectors keep a single source of truth in state while still exposing the shapes the UI needs.
+
+## Common Mistakes
+
+### CRITICAL Mutating selected state outside reducers
+
+Wrong:
+
+```ts
+const post = selectPostById(store.getState(), 'p1')
+
+if (post) {
+  post.title = 'Changed in place'
+}
+```
+
+Correct:
+
+```ts
+store.dispatch(postUpdated({ id: 'p1', changes: { title: 'Changed in place' } }))
+```
+
+Objects read from the store are still store state; mutating them outside reducers breaks immutability and stale-render assumptions.
+
+Source: reduxjs/redux:docs/style-guide/style-guide.md
+
+### HIGH Using setter-style actions instead of event-style actions
+
+Wrong:
+
+```ts
+const nextPosts = [...selectPosts(store.getState()), { id: 'p2', title: 'Write docs' }]
+store.dispatch(setPosts(nextPosts))
+```
+
+Correct:
+
+```ts
+store.dispatch(postAdded({ id: 'p2', title: 'Write docs' }))
+```
+
+Actions should describe events, not ask reducers to blindly replace state with a precomputed value.
+
+Source: reduxjs/redux:docs/style-guide/style-guide.md
+
+### HIGH Combining store state before dispatch
+
+Wrong:
+
+```ts
+const currentPosts = selectPosts(store.getState())
+const mergedPosts = [
+  ...currentPosts.filter(
+    (currentPost) =>
+      !incomingPosts.some((incomingPost) => incomingPost.id === currentPost.id),
+  ),
+  ...incomingPosts,
+]
+
+store.dispatch(postsReplaced(mergedPosts))
+```
+
+Correct:
+
+```ts
+store.dispatch(postsReceived(incomingPosts))
+```
+
+If the next state depends on current store state, the reducer should own that combination logic; only authoritative external snapshots should replace state wholesale.
+
+Source: maintainer interview
+
+### HIGH Ignoring current state in async reducers
+
+Wrong:
+
+```ts
+builder.addCase(fetchPosts.fulfilled, (state, action) => {
+  state.status = 'succeeded'
+  state.items = action.payload
+})
+```
+
+Correct:
+
+```ts
+builder.addCase(fetchPosts.fulfilled, (state, action) => {
+  if (state.status === 'pending') {
+    state.status = 'succeeded'
+    state.items = action.payload
+  }
+})
+```
+
+Reducers that treat every lifecycle action as valid can move the slice into impossible states or let stale requests win.
+
+Source: reduxjs/redux:docs/tutorials/essentials/part-5-async-logic.md
+
+### MEDIUM Storing derived values in state
+
+Wrong:
+
+```ts
+const initialState = {
+  items: [] as Post[],
+  visiblePosts: [] as Post[],
+}
+```
+
+Correct:
+
+```ts
+const selectVisiblePosts = createSelector(
+  [selectPosts, selectFilter],
+  (posts, filter) =>
+    filter === 'all' ? posts : posts.filter((post) => post.published),
+)
+```
+
+Derived values drift out of sync quickly; keep the raw state and derive the view shape.
+
+Source: reduxjs/redux:docs/style-guide/style-guide.md

package/skills/evolve-and-diagnose-redux-apps/debug-redux-toolkit-apps/SKILL.md

@@ -0,0 +1,269 @@
+---
+name: evolve-and-diagnose-redux-apps/debug-redux-toolkit-apps
+description: >
+  Use this when debugging duplicate requests, stale cache behavior, broad
+  subscriptions, selector churn, serializability warnings, or other Redux
+  Toolkit and RTK Query bugs. Covers a practical event -> reducer -> selector ->
+  render debugging loop plus RTK Query cache interpretation.
+type: lifecycle
+library: "@reduxjs/toolkit"
+library_version: "2.11.2"
+requires:
+  - build-modern-redux-apps/redux-dataflow
+sources:
+  - "reduxjs/redux:docs/style-guide/style-guide.md"
+  - "reduxjs/redux:docs/tutorials/essentials/part-5-async-logic.md"
+  - "reduxjs/redux:docs/tutorials/essentials/part-8-rtk-query-advanced.md"
+  - "reduxjs/redux-toolkit:docs/usage/usage-guide.md"
+---
+
+# Debug Redux Toolkit Apps
+
+## Setup
+
+```ts
+import { configureStore, createAsyncThunk, createSlice } from '@reduxjs/toolkit'
+
+type Post = { id: string; title: string }
+
+export const fetchPosts = createAsyncThunk(
+  'posts/fetchPosts',
+  async () => {
+    const response = await fetch('/api/posts')
+    return (await response.json()) as Post[]
+  },
+  {
+    condition(_arg, { getState }) {
+      const state = getState() as RootState
+      return state.posts.status === 'idle'
+    },
+  },
+)
+
+const postsSlice = createSlice({
+  name: 'posts',
+  initialState: {
+    items: [] as Post[],
+    status: 'idle' as 'idle' | 'pending' | 'succeeded' | 'failed',
+  },
+  reducers: {},
+  extraReducers: (builder) => {
+    builder
+      .addCase(fetchPosts.pending, (state) => {
+        state.status = 'pending'
+      })
+      .addCase(fetchPosts.fulfilled, (state, action) => {
+        state.status = 'succeeded'
+        state.items = action.payload
+      })
+  },
+})
+
+export const store = configureStore({
+  reducer: {
+    posts: postsSlice.reducer,
+  },
+})
+
+type RootState = ReturnType<typeof store.getState>
+```
+
+## Core Patterns
+
+### Debug in order: action -> reducer -> selector -> render
+
+```ts
+const selectPosts = (state: RootState) => state.posts.items
+const selectPostsStatus = (state: RootState) => state.posts.status
+
+store.dispatch(fetchPosts())
+
+console.log(selectPostsStatus(store.getState()))
+console.log(selectPosts(store.getState()))
+```
+
+If a component looks wrong, first verify the action fired, then the reducer state, then the selector result, then the render boundary.
+
+### Narrow subscriptions at the usage site
+
+```tsx
+import { useAppSelector } from '../../app/hooks'
+
+export function PostsList() {
+  const posts = useAppSelector((state) => state.posts.items)
+  const status = useAppSelector((state) => state.posts.status)
+
+  return (
+    <div>
+      <div>{status}</div>
+      <div>{posts.length}</div>
+    </div>
+  )
+}
+```
+
+React-Redux behaves best when components select only the values they render and do it as close to usage as possible.
+
+### Interpret RTK Query invalidation correctly
+
+```ts
+import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'
+
+type Post = { id: string; title: string }
+
+const api = createApi({
+  reducerPath: 'api',
+  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
+  tagTypes: ['Post'],
+  endpoints: (build) => ({
+    getPosts: build.query<Post[], void>({
+      query: () => 'posts',
+      providesTags: ['Post'],
+    }),
+    updatePost: build.mutation<Post, Pick<Post, 'id' | 'title'>>({
+      query: ({ id, title }) => ({
+        url: `posts/${id}`,
+        method: 'PATCH',
+        body: { title },
+      }),
+      invalidatesTags: ['Post'],
+    }),
+  }),
+})
+```
+
+If invalidation did not visibly refetch, check whether anything was still subscribed to that cache entry.
+
+## Common Mistakes
+
+### HIGH Dispatching fetch thunks from effects without a thunk-level guard
+
+Wrong:
+
+```tsx
+import { useEffect } from 'react'
+import { useAppDispatch, useAppSelector } from '../../app/hooks'
+
+function PostsPage() {
+  const dispatch = useAppDispatch()
+  const postStatus = useAppSelector((state) => state.posts.status)
+
+  useEffect(() => {
+    if (postStatus === 'idle') {
+      dispatch(fetchPosts())
+    }
+  }, [dispatch, postStatus])
+
+  return null
+}
+```
+
+Correct:
+
+```ts
+export const fetchPosts = createAsyncThunk(
+  'posts/fetchPosts',
+  async () => {
+    const response = await fetch('/api/posts')
+    return (await response.json()) as Post[]
+  },
+  {
+    condition(_arg, { getState }) {
+      const state = getState() as RootState
+      return state.posts.status === 'idle'
+    },
+  },
+)
+```
+
+React StrictMode can run effects twice in development, so the guard belongs in the thunk as well as the component.
+
+Source: reduxjs/redux:docs/tutorials/essentials/part-5-async-logic.md
+
+### HIGH Ignoring serializable-state warnings
+
+Wrong:
+
+```ts
+const initialState = {
+  lastSeen: new Date(),
+  pendingIds: new Set<string>(),
+}
+```
+
+Correct:
+
+```ts
+const initialState = {
+  lastSeenIso: new Date().toISOString(),
+  pendingIds: [] as string[],
+}
+```
+
+Non-serializable values break DevTools, replay, persistence, and equality assumptions in subtle ways.
+
+Source: reduxjs/redux:docs/style-guide/style-guide.md
+
+### HIGH Selecting broad state in parents and threading props
+
+Wrong:
+
+```tsx
+import { useAppSelector } from '../../app/hooks'
+
+function PostsPage() {
+  const postsState = useAppSelector((state) => state.posts)
+  return <PostsList items={postsState.items} status={postsState.status} />
+}
+```
+
+Correct:
+
+```tsx
+import { useAppSelector } from '../../app/hooks'
+
+function PostsList() {
+  const items = useAppSelector((state) => state.posts.items)
+  const status = useAppSelector((state) => state.posts.status)
+  return (
+    <div>
+      <div>{status}</div>
+      <div>{items.length}</div>
+    </div>
+  )
+}
+```
+
+Selecting whole slices high in the tree widens the subscription surface and pushes rerenders through props.
+
+Source: reduxjs/redux:docs/style-guide/style-guide.md
+
+### MEDIUM Returning unstable objects from query selection logic
+
+Wrong:
+
+```tsx
+import { api } from '../../services/api'
+
+const result = api.useGetPostsQuery(undefined, {
+  selectFromResult: ({ data = [] }) => ({
+    posts: [...data],
+  }),
+})
+```
+
+Correct:
+
+```tsx
+import { api } from '../../services/api'
+
+const result = api.useGetPostsQuery(undefined, {
+  selectFromResult: ({ data = [] }) => ({
+    posts: data,
+  }),
+})
+```
+
+New object and array references defeat memoization and make components rerender even when the underlying cached data did not change.
+
+Source: reduxjs/redux:docs/tutorials/essentials/part-8-rtk-query-advanced.md