Skip to content

Commit b3e50dc

Browse files
committed
Clarify extraReducers purpose
1 parent 78813fc commit b3e50dc

File tree

1 file changed

+17
-14
lines changed

1 file changed

+17
-14
lines changed

docs/api/createSlice.mdx

Lines changed: 17 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ and automatically generates action creators and action types that correspond to
1515
This API is the standard approach for writing Redux logic.
1616

1717
Internally, it uses [`createAction`](./createAction.mdx) and [`createReducer`](./createReducer.mdx), so
18-
you may also use [Immer](https://immerjs.github.io/immer/) to write "mutating" immutable updates:
18+
you may also use [Immer](../usage/immer-reducers.md) to write "mutating" immutable updates:
1919

2020
```ts
2121
import { createSlice } from '@reduxjs/toolkit'
@@ -136,16 +136,17 @@ const todosSlice = createSlice({
136136

137137
### `extraReducers`
138138

139-
One of the key concepts of Redux is that each slice reducer "owns" its slice of state, and that many slice reducers
140-
can independently respond to the same action type. `extraReducers` allows `createSlice` to respond to other action types
141-
besides the types it has generated.
139+
Conceptually, each slice reducer "owns" its slice of state. There's also a natural correspondance between the update logic defined inside `reducers`, and the action types that are generated based on those.
142140

143-
As case reducers specified with `extraReducers` are meant to reference "external" actions, they will not have actions generated in `slice.actions`.
141+
However, there are many times that a Redux slice may also need to update its own state in response to action types that were defined elsewhere in the application (such as clearing many different kinds of data when a "user logged out" action is dispatched). This can include action types defined by another `createSlice` call, actions generated by a `createAsyncThunk`, RTK Query endpoint matchers, or any other action. In addition, one of the key concepts of Redux is that many slice reducers can independently respond to the same action type.
144142

145-
As with `reducers`, these case reducers will also be passed to `createReducer` and may "mutate" their state safely.
143+
**`extraReducers` allows `createSlice` to respond and update its own state in response to other action types besides the types it has generated.**
146144

147-
If two fields from `reducers` and `extraReducers` happen to end up with the same action type string,
148-
the function from `reducers` will be used to handle that action type.
145+
As with the `reducers` field, each case reducer in `extraReducers` is [wrapped in Immer and may use "mutating" syntax to safely update the state inside](../usage/immer-reducers.md).
146+
147+
However, unlike the `reducers` field, each individual case reducer inside of `extraReducers` will _not_ generate a new action type or action creator.
148+
149+
If two fields from `reducers` and `extraReducers` happen to end up with the same action type string, the function from `reducers` will be used to handle that action type.
149150

150151
### The `extraReducers` "builder callback" notation
151152

@@ -162,6 +163,14 @@ See [the "Builder Callback Notation" section of the `createReducer` reference](.
162163

163164
### The `extraReducers` "map object" notation
164165

166+
:::caution
167+
168+
The "map object" notation is deprecated and will be removed in RTK 2.0. Please migrate to the "builder callback" notation, which offers much better TypeScript support and more flexibility.
169+
170+
If you do not use the `builder callback` and are using TypeScript, you will need to use `actionCreator.type` or `actionCreator.toString()` to force the TS compiler to accept the computed property. Please see [Usage With TypeScript](./../usage/usage-with-typescript.md#type-safety-with-extraReducers) for further details.
171+
172+
:::
173+
165174
Like `reducers`, `extraReducers` can be an object containing Redux case reducer functions. However, the keys should
166175
be other Redux string action type constants, and `createSlice` will _not_ auto-generate action types or action creators
167176
for reducers included in this parameter.
@@ -185,12 +194,6 @@ createSlice({
185194
})
186195
```
187196

188-
:::tip
189-
190-
We recommend using the `builder callback` API as the default, especially if you are using TypeScript. If you do not use the `builder callback` and are using TypeScript, you will need to use `actionCreator.type` or `actionCreator.toString()` to force the TS compiler to accept the computed property. Please see [Usage With TypeScript](./../usage/usage-with-typescript.md#type-safety-with-extraReducers) for further details.
191-
192-
:::
193-
194197
## Return Value
195198

196199
`createSlice` will return an object that looks like:

0 commit comments

Comments
 (0)