Skip to content

Commit 906d01d

Browse files
committed
Fill out createSlice docs
1 parent 1a6f00e commit 906d01d

File tree

1 file changed

+81
-1
lines changed

1 file changed

+81
-1
lines changed

docs/api/createSlice.md

Lines changed: 81 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,87 @@ hide_title: true
99

1010
A function that accepts an initial state, an object full of reducer functions, and optionally a "slice name", and automatically generates action creators, action types, and selectors that correspond to the reducers and state.
1111

12-
The reducers will be wrapped in the [`createReducer()` utility](createReducer.md), and so they can safely "mutate" the state they are given.
12+
## Parameters
13+
14+
`createSlice` accepts a single configuration object parameter, with the following options:
15+
16+
```ts
17+
function configureStore({
18+
// An object of "case reducers". Key names will be used to generate actions.
19+
reducers: Object<string, ReducerFunction>
20+
// The initial state for the reducer
21+
initialState: any,
22+
// An optional name, used in action types and selectors
23+
slice?: string,
24+
})
25+
```
26+
27+
### `reducers`
28+
29+
An object containing Redux "case reducer" functions (functions intended to handle a specific action type, equivalent
30+
to a single case statement in a switch).
31+
32+
The keys in the object will be used to generate string action type constants, and these will show up in the Redux
33+
DevTools Extension when they are dispatched. Also, if any other part of the application happens to dispatch an action
34+
with the exact same type string, the corresponding reducer will be run. Therefore, you should give the functions
35+
descriptive names.
36+
37+
This object will be passed to [`createReducer`](./createReducer.md), so the reducers may safely "mutate" the
38+
state they are given.
39+
40+
### `initialState`
41+
42+
The initial state value for this slice of state.
43+
44+
### `slice`
45+
46+
An optional string name for this slice of state.
47+
48+
The slice name is used in two ways.
49+
50+
First, if provided, generated action type constants will use this as a prefix.
51+
52+
Second, it affects the name and behavior of the generated selector. If provided, a selector named after the slice
53+
will be generated. This selector assume the slice data exists in an object, with the slice name as the key, and will
54+
return the value at that key name. If not provided, a selector named `getState` will be generated that just returns
55+
its argument.
56+
57+
58+
## Return Value
59+
60+
`createSlice` will return an object that looks like:
61+
62+
```ts
63+
{
64+
slice : string,
65+
reducer : ReducerFunction,
66+
actions : Object<string, ActionCreator},
67+
selectors : Object<string, Selector>
68+
}
69+
```
70+
71+
Each function defined in the `reducers` argument will have a corresponding action creator generated using [`createAction`](./createAction.md)
72+
and included in the result's `actions` field using the same function name.
73+
74+
The generated `reducer` function is suitable for passing to the Redux `combineReducers` function as a "slice reducer".
75+
76+
The generated selector function will be available in the result's `selectors` field.
77+
78+
You may want to consider destructuring the action creators and exporting them individually, for ease of searching
79+
for references in a larger codebase.
80+
81+
> **Note**: the result object is conceptually similar to a
82+
> ["Redux duck" code structure](https://redux.js.org/faq/code-structure#what-should-my-file-structure-look-like-how-should-i-group-my-action-creators-and-reducers-in-my-project-where-should-my-selectors-go).
83+
> The actual code structure you use is up to you, but there are a couple caveats to keep in mind:
84+
>
85+
> - Actions are not exclusively limited to a single slice. Any part of the reducer logic can (and should!) respond
86+
> to any dispatched action.
87+
> - At the same time, circular references can cause import problems. If slices A and B are defined in
88+
> separate files, and each file tries to import the other so it can listen to other actions, unexpected
89+
> behavior may occur.
90+
91+
92+
## Examples
1393

1494
```js
1595
import { createSlice } from 'redux-starter-kit'

0 commit comments

Comments
 (0)