Editing Openai/694590c5-f52c-800f-9af6-d10143a2d812 (section)

== gpt-5-t-mini ==
=== User: builder.addCaseuserLoggedOut -- why not put this in normal reducer? ===
builder.addCase(userLoggedOut -- why not put this in normal reducer?

=== Assistant: builder.addCaseuserLoggedOut... ===
builder.addCase(userLoggedOut...) is in extraReducers because userLoggedOut is an action defined outside the slice.
reducers is for this slice's own action creators; extraReducers is the designed place to respond to actions created elsewhere (including createAsyncThunk lifecycle actions).

Why use extraReducers (short list):
* Correct intent: it expresses “react to an external action” instead of creating a new action for this slice.
* Avoids circular imports: the auth slice can export userLoggedOut and other slices can consume it without exporting their own action creators back.
* Works with thunks/auto-generated actions: createAsyncThunk produces pending/fulfilled/rejected — these belong in extraReducers.
* Type-safe and clear: builder.addCase(userLoggedOut, ...) keeps TypeScript inference and intent clear.

Examples:

Preferred (extraReducers / builder):

<syntaxhighlight lang="ts">import { userLoggedOut } from '@/features/auth/authSlice'

const postsSlice = createSlice({
  name: 'posts',
  initialState,
  reducers: { /'' local actions ''/ },
  extraReducers: builder => {
    builder.addCase(userLoggedOut, () => initialState)
  }
})

</syntaxhighlight>

Alternate (string key — less idiomatic):

<syntaxhighlight lang="ts">extraReducers: {
  [userLoggedOut.type]: () => initialState
}

</syntaxhighlight>

Putting this handler inside reducers would attempt to make it a local action creator (wrong ownership), and leads to coupling or awkward workarounds. Use extraReducers for external actions.

=== User: would we dispatch it as dspatchuseLoggerdOUt and dispatchpostSlice/postUpdate so the userLoggout will run duspatch for … ===
would we dispatch it as dspatch(useLoggerdOUt) and dispatch(postSlice/postUpdate) so the userLoggout will run duspatch for userSlice/Logout too meaning logout will run functions from other slices while postSLice/postUpdate wont run useSLice/postUpdate?

=== Assistant: Short answer: yes — every dispatched action is broadcast to the whole store, and any slice that has a case matching tha… ===
Short answer: yes — every dispatched action is broadcast to the whole store, and any slice that has a case matching that action will run its reducer for it. There’s no implicit one-way restriction.

Key points:
* dispatch(userLoggedOut()) sends an action { type: 'auth/userLoggedOut', ... } to the store. - The auth slice reducer (if it defines that case) will run. - Any other slice that called builder.addCase(userLoggedOut, ...) will also run its case reducer (e.g., postsSlice clearing posts).
* dispatch(postUpdated(...)) behaves the same: all reducers see the action; only slices that declared a case for that action will change state.

Important distinctions:
* Actions are just plain objects with a type. Reducers decide whether to react. Nothing “calls functions in other slices” automatically except the reducers that explicitly handle that action.
* If you want multiple things to happen as part of a logical operation, either: - dispatch a single shared action (and have other slices handle it via extraReducers), or - dispatch multiple actions from a thunk: dispatch(doA()); dispatch(doB());
* Middleware/listeners (thunks, createListenerMiddleware) can run extra side effects when actions are dispatched.
* Don’t dispatch inside reducers. Use middleware/thunks for side effects or chained dispatches.

Example:

<syntaxhighlight lang="ts">// authSlice exports userLoggedOut
builder.addCase(userLoggedOut, state => { /'' auth cleanup ''/ })

// postsSlice
builder.addCase(userLoggedOut, () => initialPostsState) // reacts to logout
// but postsSlice won't react to postUpdated unless it explicitly handles it

</syntaxhighlight>

=== User: Redux does: ===
Redux does:

Create { type: 'auth/userLoggedOut' }

Call all slice reducers

Any slice that has a case for 'auth/userLoggedOut' runs

So:

✅ authSlice runs its case

✅ postsSlice runs its case

How come the postSLice has post/userLoggout how does that run?

=== Assistant: Because reducers match on the exact action type string. ===
Because reducers match on the exact action <code>type</code> string. Two different things can make the same type show up:
# Importing the same action creator into another slice and registering it there:

<syntaxhighlight lang="ts">// authSlice.ts
export const userLoggedOut = createAction('auth/userLoggedOut')

// postsSlice.ts
import { userLoggedOut } from '@/features/auth/authSlice'

extraReducers: builder => {
  builder.addCase(userLoggedOut, () => initialPostsState) // runs when auth/userLoggedOut is dispatched
}

</syntaxhighlight>

Here postsSlice handles auth/userLoggedOut because it explicitly registered that exact action (via the imported userLoggedOut).
# Using a different action creator/string (e.g. 'posts/userLoggedOut') will not run for 'auth/userLoggedOut':

<syntaxhighlight lang="ts">// postsSlice.ts
builder.addCase('posts/userLoggedOut', () => { /'' won't run for auth/userLoggedOut ''/ })

</syntaxhighlight>

So: if you see postsSlice reacting to logout, it’s because the slice code registered a handler for the same action type (auth/userLoggedOut) — usually by importing the userLoggedOut action creator from the auth slice. If it registered posts/userLoggedOut instead, that handler would never run when you dispatch(userLoggedOut()).