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

=== 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.