Skip to content

Commit 6226c1d

Browse files
committed
add note about exposing multiple values per reducer def
1 parent 2d08f5d commit 6226c1d

File tree

1 file changed

+57
-1
lines changed

1 file changed

+57
-1
lines changed

docs/usage/custom-slice-creators.mdx

Lines changed: 57 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -449,6 +449,8 @@ context.addCase(action, reducer)
449449
context.addCase(type, reducer)
450450
```
451451

452+
Returns the context object to allow chaining.
453+
452454
#### `addMatcher`
453455

454456
The same as [`addMatcher`](../api/createReducer#builderaddmatcher) for `createReducer` and `extraReducers`. Adds a case reducer which will be called when a given matcher returns true.
@@ -458,6 +460,8 @@ const matcher = isAnyOf(action, action2)
458460
context.addMatcher(matcher, reducer)
459461
```
460462

463+
Returns the context object to allow chaining.
464+
461465
#### `exposeAction`
462466

463467
Attaches a value to `slice.actions[reducerName]`.
@@ -467,9 +471,18 @@ const action = createAction(type)
467471
context.exposeAction(action)
468472
```
469473

474+
Returns the context object to allow chaining.
475+
470476
:::caution
471477

472-
`exposeAction` should only be called once (at maximum) within a `handle` callback - the same applies to `exposeCaseReducer`.
478+
`exposeAction` should only be called once (at maximum) within a `handle` callback.
479+
480+
If you want to expose multiple values for a given case reducer's actions, you can pass an object to `exposeAction`.
481+
482+
```ts no-transpile
483+
context.exposeAction({ hidden: hiddenAction, shown: shownAction })
484+
// available as slice.actions[reducerName].hidden and slice.actions[reducerName].shown
485+
```
473486

474487
:::
475488

@@ -481,6 +494,49 @@ Attaches a value to `slice.caseReducers[reducerName]`.
481494
context.exposeCaseReducer(reducer)
482495
```
483496

497+
Returns the context object to allow chaining.
498+
499+
:::caution
500+
501+
Just like `exposeAction`, `exposeCaseReducer` should only be called once (at maximum) within a `handle` callback.
502+
503+
If you want to expose multiple values for a given case reducer definition, you can pass an object to `exposeCaseReducer`.
504+
505+
```ts no-transpile
506+
context.exposeCaseReducer({
507+
hidden: config.hidden || noop,
508+
shown: config.shown || noop,
509+
})
510+
// available as slice.caseReducers[reducerName].hidden and slice.caseReducers[reducerName].shown
511+
```
512+
513+
You can see an example of this with the `asyncThunk` creator in the [RTK creators](#rtk-creators) section, which exposes case reducers for each of the lifecycle actions.
514+
515+
```ts no-transpile
516+
const asyncThunkCreator: ReducerCreator<typeof asyncThunkCreatorType> = {
517+
type: asyncThunkCreatorType,
518+
create(payloadCreator, config) {
519+
return {
520+
_reducerDefinitionType: asyncThunkCreatorType,
521+
payloadCreator,
522+
config,
523+
}
524+
},
525+
handle({ type }, definition, context) {
526+
const { payloadCreator, config } = definition
527+
const thunk = createAsyncThunk(type, payloadCreator, config)
528+
context.exposeAction(thunk).exposeCaseReducer({
529+
pending: config.pending || noop,
530+
rejected: config.rejected || noop,
531+
fulfilled: config.fulfilled || noop,
532+
settled: config.settled || noop,
533+
})
534+
},
535+
}
536+
```
537+
538+
:::
539+
484540
#### `getInitialState`
485541

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

0 commit comments

Comments
 (0)