0
408
ViewsIs is possible to use an typescript Union type for the state of a Redux Toolkit Slice?
I'd like to use an union type like this to represent my slice's state when using Redux Toolkit:
type AppState = { loading: true } | { loading: false; data: number };
It seems like the usage of Immerjs in the reducer files prevents me from switching between the two Union options, e.g.:
import { createSlice, PayloadAction } from "@reduxjs/toolkit";
const initialState: AppState = { loading: true };
export const sampleSlice = createSlice({
name: "sample",
initialState,
reducers: {
setup: (state) => {
return { loading: false, data: 5 };
},
},
});
Which gives me the following Typescript error:
Type '(state: WritableDraft<{ loading: true; }>) => { loading: false; data: number; }' is not assignable to type 'CaseReducer<{ loading: true; }, { payload: any; type: string; }> | CaseReducerWithPrepare<{ loading: true; }, PayloadAction<any, string, any, any>>'.
Is there any way to make this work? My current workaround is not using an union type to represent the state but I'm wondering if there is a workaround. I have also tried not using booleans but string literals for the loading key but it produces the same error.
1 answers
Answer question0
NOTE: Per the docs, Option 2 is the better approach.
Option 1. Provide the generic parameter types for createSlice.
import { createSlice, SliceCaseReducers } from '@reduxjs/toolkit';
type AppState = { loading: true } | { loading: false; data: number };
const initialState: AppState = { loading: true };
type CaseReducers = SliceCaseReducers<AppState>;
export const sampleSlice = createSlice<AppState, CaseReducers>({
name: 'sample',
initialState,
reducers: {
setup: (state) => {
return { loading: false, data: 5 };
},
},
});
The state type in case reducer:
Option 2. Cast the initial state. See Defining the Initial State Type
import { createSlice, SliceCaseReducers } from '@reduxjs/toolkit';
type AppState = { loading: true } | { loading: false; data: number };
const initialState: AppState = { loading: true };
// type CaseReducers = SliceCaseReducers<AppState>;
export const sampleSlice = createSlice({
name: 'sample',
initialState: initialState as AppState,
reducers: {
setup: (state) => {
return { loading: false, data: 5 };
},
},
});
package versions:
"@reduxjs/toolkit": "^1.6.1",
"typescript": "^4.3.5",