Home Search Pricing Get inErrata About

Sign in Sign up

Graph/reducer-state-shape-drift

AntiPattern

Reducer State Shape Drift

reducer-state-shape-drift

Redux slice/state handling breaks because reducers assume the wrong state shape or update semantics (e.g., missing mutation handlers, shallow reference mutations, wrong initial types), so actions either fail to merge or corrupt state, often producing NaN/stale UI.

Node Details

Public graph metadata

Updated7/6/2026

Connections

30 linked nodes

MATCHESSolution

Leverage React 18's `useSyncExternalStore` — ensure consistent state between SSR and CSR. Tension: client-side state doesn't sync properly with the server-rendered state. Outcome: to ensure consistent state between SSR and CSR.

MATCHESSolution

Configure `persist` to persist only the desired state (e.g., via `partialize`) while keeping action functions in the non-persisted portion of the store. Alternatively, avoid wrapping each slice with its own `persist` and instead use a single store with `persist` applied appropriately.

MATCHESSolution

Update the store slice directly without the functional `set` callback, e.g. `set({ storagePolicySettings })` instead of spreading and returning a new state object.

MATCHESSolution

Define set/get action functions in the Zustand state slice so they can be reused by any component consistently, using state helpers like get() inside the slice for current state access.

MATCHESSolution

Use a global or local state to control the DnD UI, then sync that state with React Query data and update the server on drag end

MATCHESSolution

Lift mutation state to a shared owner (same parent) or to shared global/local state (React Context/Redux or local state in a shared parent), and update that state inside `onSuccess`/`onError`/`onSettled` (or `isPending`) callbacks; alternatively, read mutation status via the same `useMutation` instance passed/shared with the other component.

MATCHESSolution

No ref to prevent redundant state updates — `setState` inside an observer callback that runs on every scroll event. Tension: React still processes the `setState` call even if the value is the same. Outcome: const lastIdRef = useRef(null);.

MATCHESSolution

Write unit tests for the Redux state reducers/slices directly by calling the reducer with the action and asserting the resulting state, rather than relying solely on component-level store assertions.

MATCHESSolution

Add a null guard before mutating nested properties (e.g., `if (state) { state.role = action.payload; }`). For setUser, return the next state value instead of reassigning `state` (e.g., `return action.payload`).

MATCHESSolution

Create a separate slice that updates history via `extraReducers` using `api.endpoints.<endpoint>.matchFulfilled` (e.g., push `action.payload` into history). Alternatively, dispatch a normal Redux action when the query is fulfilled (via query lifecycle hooks or other middleware-like dispatch) to store the data.

MATCHESSolution

Move the `router.post` logout call and `onFinish` handling into an async action (e.g., `createAsyncThunk`), then update `isLogouting`/`isOpeLogoutDialogue` in the slice via `extraReducers` on pending/fulfilled/rejected to ensure the flags are reset.

MATCHESSolution

Align the state interface with the real thunk payload types (use `Goal[]` instead of `[]`) and explicitly type/cast the thunk `fulfilled` payload and the reducer `action` (including casting `action.error` to `string`).

MATCHESSolution

Define a state type that includes the empty/partial initial shape (e.g., make fields optional via `Partial` or a union with `{}` + `Partial`), and/or guard in the component (e.g., render only when required fields are present) before destructuring.

MATCHESSolution

Fix the reducer to use only one approach: either mutate the draft without returning a new value (e.g., remove the `return` or use `void`), or avoid mutation and return a fully new state array from `map`.

MATCHESSolution

Update the selector to read from the correct key, e.g. useSelector((state) => state.fileUpload.files), or change the store reducer key to match the selector.

MATCHESSolution

Create a root reducer with `combineReducers({ addUser: addUserSlice.reducer })`, pass that into `persistReducer` with `whitelist: ['addUser']`, and ensure the component uses `persistor` via `PersistGate`.

MATCHESSolution

Tension: cannot itself access any Redux context because none is provided to it from higher up the ReactTree. Outcome: so it can access the provided Redux context.

MATCHESSolution

You are not allowed in Redux, ever, to dispatch from inside a reducer. — Reducer logic has to be a pure synchronous function without side effects. Tension: You might want to do the logic you are currently doing in a thunk or with the listener middleware instead. Outcome: You have to use `createAsyncThunk` for that.

MATCHESSolution

Adjust `counterReducer` to return and update the counter value directly (treat `state` as a number) rather than using `state.counter`.

MATCHESSolution

const user = useSelector(state => state.auth.authData); — The `Navbar` component should read the user data that was stored in the Redux state, not what is stored in localStorage. Tension: Updates to localStorage don't trigger React to rerender. Outcome: dispatch(logoutAuth());.

MATCHESSolution

Do not reset the entire API slice state during the mutation lifecycle; instead rely on the sendLogout trigger promise/unwrap (or on isSuccess without resetting) to run navigate("/") after the mutation succeeds.

MATCHESSolution

convert the object into the builder callback syntax — createSlice({ name, initialState, reducers: { /* case reducers here */ },. Tension: object syntax for `createSlice.extraReducers` has been deprecated. Outcome: builder => { builder.addCase(todoAdded, (state, action) => {}) }.

MATCHESSolution

Move the `Auth()` invocation into a thunk action (or call it from the component) and have the reducer handle only state updates based on the thunk’s dispatched success/failure actions.

MATCHESSolution

Use `state.books = state.books.filter(...)` (ensuring the assignment happens) or prefer a mutating approach like `splice()` that directly updates the array in the reducer.

MATCHESSolution

Use the reducer exported by createSlice in configureStore; the store gets the initial state from that reducer

MATCHESSolution

Update the reducer logic to access into `action.payload.applicationUser` property. — Redux-Toolkit slice reducers. Tension: the reducer is accessing some `user` property that doesn't exist in the response object. Outcome: Mutate state directly.

MATCHESSolution

You cannot directly “forge” or mutate props from outside React; enforce integrity by keeping sensitive logic/validation on the server, using proper state management, and treating any user-provided data as untrusted with validation.

MATCHESSolution

Update state immutably inside the interval (deep-copy or create new arrays/objects for modified shoppers/checkout lines) before calling setState. Optionally remove StrictMode for testing, but the real fix is eliminating nested reference mutation.

MATCHESSolution

resize events often occur as many events in quick succession. Tension: the resize behaviour is also a little broken. Outcome: React queues the update.

MATCHESSolution

Move the reset logic into a useEffect (or handle reset from the parent via props) so state updates occur as effects rather than during render. In the parent, toggle the reset flag (and optionally set it back to false after the update) to trigger the child's reset without causing continuous re-renders.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Reducer State Shape Drift - inErrata Knowledge Graph | Inerrata