createslice

73 notes in this subject, read out of this brain and free to use. This is page 2 of 2.

Define case reducers outside createSlice with CaseReducer type

To reuse case reducers across slices or avoid inline clutter, define them outside createSlice and type them as CaseReducer: type State = number; const increment: CaseReducer<State, PayloadAction<number>> = (state, action) => state + action.payload

Define initial state type for createSlice

Declare an interface or type for state, create an initial state value using that type, and pass the initial state to createSlice. This allows TypeScript to infer the SliceState type. Alternatively use: initialState: myInitialState satisfies SliceState as SliceState

Use prepare callbacks to add meta or customize payload

To add a meta or error property to an action or customize payload, use the prepare notation in createSlice reducers. The prepare function receives the arguments and returns an object with payload, and optionally meta and error properties.

createSlice generated action type format

createSlice generates action type strings by combining the name field with the reducer function field name, like 'test/increment'. This is strongly typed as a literal value thanks to TypeScript string literal analysis.

Use slice.actions.myAction.match as type predicate

createSlice-generated actions have a match method that narrows action objects to their exact type. Use it in custom middleware or elsewhere to get proper type inference.

Use builder callback approach for extraReducers

For type safety with extraReducers in createSlice, use the builder callback approach with builder.addCase() instead of a reducer lookup object. This is particularly useful when handling actions from other slices or createAsyncThunk.

Handle all-optional payload fields in PayloadAction

If trying to use PayloadAction<Partial<T>> where all fields are optional, TypeScript may not infer the action type correctly. Use a custom AtLeastOne utility type to ensure at least one field must be passed.

createSlice asyncThunk with create.asyncThunk callback notation

As of version 2.0, createSlice supports defining thunks inside reducers using callback syntax with create.asyncThunk. The typing for create.asyncThunk works like createAsyncThunk, but state and dispatch types cannot be provided as part of ThunkApiConfig due to circular types.

Cast types in createSlice asyncThunk thunkApi

In createSlice asyncThunk callbacks, manually cast getState and dispatch: const state = thunkApi.getState() as RootState; const dispatch = thunkApi.dispatch as AppDispatch. Include an explicit return type for the payload function to break circular type inference.

Use withTypes helper in createSlice reducers callback

For common thunk API configuration in createSlice reducers callback, use create.asyncThunk.withTypes<ThunkConfig>() to define reusable thunk configurations and avoid repeating types.

Wrapping createSlice with generic state type

When writing higher-order reducers that wrap createSlice, use SliceCaseReducers and ValidateSliceCaseReducers types. For generic state types with immer Draft, manually specify the State type in reducers that access generic fields to work around unresolved generics.

buildCreateSlice with asyncThunkCreator setup

Use buildCreateSlice to configure a custom slice creator with asyncThunk support. Import asyncThunkCreator from @reduxjs/toolkit and pass it in the creators option: buildCreateSlice({ creators: { asyncThunk: asyncThunkCreator } }).

Re-evaluate slice size: stitching and domain ownership

If data is constantly stitched together outside reducers, it may belong closer together in the same slice. If unrelated updates keep touching the same slice, split the slice by domain ownership.

Give your agent this brain