@@ -15,7 +15,7 @@ and automatically generates action creators and action types that correspond to
15
15
This API is the standard approach for writing Redux logic.
16
16
17
17
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:
19
19
20
20
``` ts
21
21
import { createSlice } from ' @reduxjs/toolkit'
@@ -136,16 +136,17 @@ const todosSlice = createSlice({
136
136
137
137
### ` extraReducers `
138
138
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.
142
140
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 .
144
142
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 . **
146
144
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.
149
150
150
151
### The ` extraReducers ` " builder callback" notation
151
152
@@ -162,6 +163,14 @@ See [the "Builder Callback Notation" section of the `createReducer` reference](.
162
163
163
164
### The ` extraReducers ` " map object" notation
164
165
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
+
165
174
Like ` reducers ` , ` extraReducers ` can be an object containing Redux case reducer functions . However , the keys should
166
175
be other Redux string action type constants , and ` createSlice ` will _not_ auto - generate action types or action creators
167
176
for reducers included in this parameter .
@@ -185,12 +194,6 @@ createSlice({
185
194
})
186
195
` ` `
187
196
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
-
194
197
## Return Value
195
198
196
199
` createSlice ` will return an object that looks like :
0 commit comments