Skip to content

Commit 2ce8b30

Browse files
committed
take titles down a step
1 parent 633028d commit 2ce8b30

File tree

2 files changed

+33
-35
lines changed

2 files changed

+33
-35
lines changed

docs/api/createSlice.mdx

+8-8
Original file line numberDiff line numberDiff line change
@@ -183,13 +183,13 @@ const todosSlice = createAppSlice({
183183
return (await res.json()) as Item
184184
},
185185
{
186-
pending: (state) => {
186+
pending(state) {
187187
state.loading = true
188188
},
189-
rejected: (state, action) => {
189+
rejected(state, action) {
190190
state.loading = false
191191
},
192-
fulfilled: (state, action) => {
192+
fulfilled(state, action) {
193193
state.loading = false
194194
state.todos.push(action.payload)
195195
},
@@ -284,16 +284,16 @@ create.asyncThunk(
284284
return (await res.json()) as Item
285285
},
286286
{
287-
pending: (state) => {
287+
pending(state) {
288288
state.loading = true
289289
},
290-
rejected: (state, action) => {
290+
rejected(state, action) {
291291
state.error = action.payload ?? action.error
292292
},
293-
fulfilled: (state, action) => {
293+
fulfilled(state, action) {
294294
state.todos.push(action.payload)
295295
},
296-
settled: (state, action) => {
296+
settled(state, action) {
297297
state.loading = false
298298
}
299299
options: {
@@ -673,7 +673,7 @@ store.dispatch(user.actions.setUserName('eric'))
673673

674674
`buildCreateSlice` allows you to create a custom version of `createSlice` with some configuration.
675675

676-
Currently, this is only used for [slice creators](#slice-reducer-creators).
676+
Currently, this is only used for [slice creators](../usage/custom-slice-creators).
677677

678678
### Parameters
679679

docs/usage/custom-slice-creators.mdx

+25-27
Original file line numberDiff line numberDiff line change
@@ -7,8 +7,6 @@ hide_title: true
77

88
# Custom Slice Creators
99

10-
## Slice creators
11-
1210
Redux Toolkit 2.0 introduces the concept of "slice creators", which allow you to define reusable logic for creating slices.
1311

1412
These "creators" have the capability to:
@@ -46,7 +44,7 @@ const { undo, redo, reset, updateTitle, togglePinned } =
4644
postSliceWithHistory.actions
4745
```
4846

49-
### The `reducers` "creator callback" notation
47+
## The `reducers` "creator callback" notation
5048

5149
In order to use slice creators, `reducers` becomes a callback, which receives a `create` object. This `create` object contains a couple of [inbuilt creators](#rtk-creators), along with any creators passed to [`buildCreateSlice`](#buildcreateslice).
5250

@@ -111,11 +109,11 @@ const todosSlice = createAppSlice({
111109
export const { addTodo, deleteTodo, fetchTodo } = todosSlice.actions
112110
```
113111

114-
#### RTK Creators
112+
### RTK Creators
115113

116114
These creators come built into RTK, and are always available on the `create` object passed to the `reducers` callback.
117115

118-
##### `create.reducer`
116+
#### `create.reducer`
119117

120118
A standard slice case reducer. Creates an action creator with the same name as the reducer.
121119

@@ -135,7 +133,7 @@ The [creator definition](#creator-definitions) for `create.reducer` is exported
135133

136134
:::
137135

138-
##### `create.preparedReducer`
136+
#### `create.preparedReducer`
139137

140138
A [prepared](#customizing-generated-action-creators) reducer, to customize the action creator. Creates a prepared action creator with the same name as the reducer.
141139

@@ -164,7 +162,7 @@ The [creator definition](#creator-definitions) for `create.preparedReducer` is e
164162

165163
:::
166164

167-
#### Optional RTK Creators
165+
### Optional RTK Creators
168166

169167
These creators are not included in the default `create` object, but can be added by passing them to [`buildCreateSlice`](#buildcreateslice).
170168

@@ -231,7 +229,7 @@ const createAppSlice = buildCreateSlice({
231229

232230
:::
233231

234-
##### `create.asyncThunk` (`asyncThunkCreator`)
232+
#### `create.asyncThunk` (`asyncThunkCreator`)
235233

236234
Creates an async thunk and adds any provided case reducers for lifecycle actions.
237235

@@ -326,13 +324,13 @@ reducers: (create) => {
326324

327325
:::
328326

329-
### Writing your own creators
327+
## Writing your own creators
330328

331329
In version v2.3.0, we introduced a system for including your own creators.
332330

333331
The below documentation will cover how to write your own creators, and how to use them with `createSlice`.
334332

335-
#### Reducer definitions
333+
### Reducer definitions
336334

337335
A reducer definition is an object (or function) with a `_reducerDefinitionType` property indicating which creator should handle it. Other than this property, it is entirely up to the creator what this definition object can look like.
338336

@@ -363,7 +361,7 @@ const definitions = {
363361

364362
Typically a creator will return a [single reducer definition](#single-definitions), but it could return an object of [multiple definitions](#multiple-definitions) to be spread into the final object, or [something else entirely](#other)!
365363

366-
#### Creator definitions
364+
### Creator definitions
367365

368366
A creator definition contains the actual runtime logic for that creator. It's an object with a `type` property, a `create` method, and an optional `handle` method.
369367

@@ -413,15 +411,15 @@ const reducerCreator: ReducerCreator<typeof reducerCreatorType> = {
413411
}
414412
```
415413

416-
##### `create`
414+
#### `create`
417415

418416
The `create` method is the function that will be attached to the `create` object, before it's passed to the `reducers` callback.
419417

420418
Because it's a function, the `this` value will be the final `create` object when called (assuming a `create.creator()` call). It also could have additional methods attached.
421419

422420
See the [Further examples](#further-examples) section for some examples of these.
423421

424-
#### `handle`
422+
### `handle`
425423

426424
The `handle` callback of a creator will be called for any reducer definitions with a matching `_reducerDefinitionType` property.
427425

@@ -438,7 +436,7 @@ The reducer details object has two properties:
438436

439437
The context object includes:
440438

441-
##### `addCase`
439+
#### `addCase`
442440

443441
The same as [`addCase`](./createReducer#builderaddcase) for `createReducer` and `extraReducers`. Adds a case reducer for a given action type, and can receive an action type string or an action creator with a `.type` property.
444442

@@ -447,7 +445,7 @@ const action = createAction(type)
447445
context.addCase(action, reducer)
448446
```
449447

450-
##### `addMatcher`
448+
#### `addMatcher`
451449

452450
The same as [`addMatcher`](./createReducer#builderaddmatcher) for `createReducer` and `extraReducers`. Adds a case reducer which will be called when a given matcher returns true.
453451

@@ -456,7 +454,7 @@ const matcher = isAnyOf(action, action2)
456454
context.addMatcher(matcher, reducer)
457455
```
458456

459-
##### `exposeAction`
457+
#### `exposeAction`
460458

461459
Attaches a value to `slice.actions`. Receives the key to be set under (typically `reducerName`) and the value to be set.
462460

@@ -465,15 +463,15 @@ const action = createAction(type)
465463
context.exposeAction(reducerName, action)
466464
```
467465

468-
##### `exposeCaseReducer`
466+
#### `exposeCaseReducer`
469467

470468
Attaches a value to `slice.caseReducers`. Receives the key to be set under (typically `reducerName`) and the value to be set.
471469

472470
```ts no-transpile
473471
context.exposeCaseReducer(reducerName, reducer)
474472
```
475473

476-
##### `getInitialState`
474+
#### `getInitialState`
477475

478476
Returns the initial state value for the slice. If a lazy state initializer has been provided, it will be called and a fresh value returned.
479477

@@ -486,7 +484,7 @@ context
486484
.exposeCaseReducer(reducerName, resetReducer)
487485
```
488486

489-
#### Typescript
487+
### Typescript
490488

491489
The Typescript system for custom slice creators uses a "creator registry" system similar to the module system for [RTK Query](/rtk-query/usage/customizing-create-api#creating-your-own-module).
492490

@@ -516,7 +514,7 @@ The type parameters for `SliceReducerCreators` are:
516514

517515
The `ReducerCreatorEntry<Create, Exposes>` utility has two type parameters:
518516

519-
##### `Create`
517+
#### `Create`
520518

521519
The signature of the `create` method of the creator definition.
522520

@@ -617,13 +615,13 @@ declare module '@reduxjs/toolkit' {
617615

618616
:::
619617

620-
##### `Exposes` (optional)
618+
#### `Exposes` (optional)
621619

622620
The second type parameter for `ReducerCreatorEntry` is optional, but should be used if the creator will handle some reducer definitions itself. It indicates what actions and case reducers will be attached to the slice, and is used to determine the final types of `slice.actions` and `slice.caseReducers`.
623621

624622
It should be an object with some of the following properties:
625623

626-
###### `actions`
624+
##### `actions`
627625

628626
The actions property will typically be a [mapped type](https://www.typescriptlang.org/docs/handbook/2/mapped-types.html) over the `CaseReducers` type parameter, returning what the creator's `handle` would expose when given that definition.
629627

@@ -668,7 +666,7 @@ declare module '@reduxjs/toolkit' {
668666
}
669667
```
670668

671-
###### `caseReducers`
669+
##### `caseReducers`
672670

673671
Similar to `actions`, except for `slice.caseReducers`.
674672

@@ -718,7 +716,7 @@ declare module '@reduxjs/toolkit' {
718716
}
719717
```
720718

721-
#### Further examples
719+
### Further examples
722720

723721
This section will cover in depth examples, for potential applications with hopefully applicable lessons to other use cases.
724722

@@ -743,7 +741,7 @@ export const createAppSlice = buildCreateSlice({
743741

744742
:::
745743

746-
##### Single definitions
744+
#### Single definitions
747745

748746
Commonly, a creator will return a single reducer definition, to be handled by either itself or another creator.
749747

@@ -900,7 +898,7 @@ const { showToast } = toastSlice.actions
900898
toastSlice.caseReducers.showToast.hidden({}, showToast.hidden('id'))
901899
```
902900

903-
##### Multiple definitions
901+
#### Multiple definitions
904902

905903
A creator could also return multiple definitions, which would then be spread into the final definitions object. This is a more composable alternative to the [wrapping `createSlice`](usage/usage-with-typescript#wrapping-createslice) approach, as you could call multiple creators as needed.
906904

@@ -1081,7 +1079,7 @@ const postSliceWithHistory = createAppSlice({
10811079
const { undo, redo, reset } = postSliceWithHistory.actions
10821080
```
10831081

1084-
##### Other
1082+
#### Other
10851083

10861084
A creator doesn't have to return any reducer definitions, it could be any sort of utility for defining reducers.
10871085

0 commit comments

Comments
 (0)