Mutate state with dynamic keys in CreateSlice method - reactjs

Question

I am using Redux Toolkit in my application, where I want to update state with dynamic keys(state[keys]). I am getting error as Element implicitly has an 'any' type because expression of type 'string' can't be used to index type 'RootFormState'
For example:
//someSlice.ts
interface FormState<T> {
isValid: boolean;
answer: T;
}
interface RootFormState {
breakfast: FormState<Array>;
lunch: FormState<string>;
dinner: FormState<Array>;
}
const initialState:RootFormState = {
breakfast: {
isValid: false,
answer: []
},
lunch: {
isValid: false,
answer: ""
},
dinner: {
isValid: false,
answer: []
}
}
const foodSlice = createSlice({
name: 'food',
initialState,
reduce: {
updateAnswer: (state, action) => {
const {id, answer} = action.payload;
state[id].answer = answer;
}
}
})

Answer 1

RTK exports a PayloadAction type you can use it to type the action parameter of the reducer.
import { createSlice, PayloadAction } from '#reduxjs/toolkit';
interface FormState<T> {
isValid: boolean;
answer: T;
}
interface RootFormState {
breakfast: FormState<Array<string>>;
lunch: FormState<string>;
dinner: FormState<Array<string>>;
}
const initialState: RootFormState = {
breakfast: { isValid: false, answer: [] },
lunch: { isValid: false, answer: '' },
dinner: { isValid: false, answer: [] },
};
type ValueOf<T> = T[keyof T];
const foodSlice = createSlice({
name: 'food',
initialState,
reducers: {
updateAnswer: (
state,
action: PayloadAction<{ id: keyof RootFormState; answer: ValueOf<RootFormState>['answer'] }>,
) => {
const { id, answer } = action.payload;
state[id].answer = answer;
},
},
});