Here is the code snippet I am working on:
import { Conversation } from "@/types/conversation";
import { PayloadAction, createSlice } from "@reduxjs/toolkit";
const initialState: Conversation | null = null;
export const conversationSlice = createSlice({
name: "conversation",
initialState,
reducers: {
setConversation: ( // encountering a type error here
state: Conversation | null,
action: PayloadAction<Conversation>
) => {
state = action.payload;
return state;
},
},
});
// Action creators are generated for each case reducer function
export const { setConversation } = conversationSlice.actions;
export default conversationSlice.reducer;
I'm facing an error with the following message:
Type '(state: Conversation | null, action: PayloadAction<Conversation>) => Conversation' is not assignable to type 'CaseReducer<null, { payload: any; type: string; }> | CaseReducerWithPrepare<null, PayloadAction<any, string, any, any>>'.
Type '(state: Conversation | null, action: PayloadAction<Conversation>) => Conversation' is not assignable to type 'CaseReducer<null, { payload: any; type: string; }>'.
Type 'Conversation' is not assignable to type 'void'.ts(2322)
I understand that immer is used internally by createSlice. Removing the return statement from setConversation removes the error but causes issues with the reducer functionality. Leaving it as it is results in the error mentioned.
How can I resolve this issue?
I attempted to eliminate the return statement and also referred to the redux toolkit documentation.
The error still persists:
import { Draft, PayloadAction, createSlice } from "@reduxjs/toolkit";
interface Conversation {
any_data: string[];
}
const initialState: Conversation | null = null;
export const conversationSlice = createSlice({
name: "conversation",
initialState,
reducers: {
setConversation: (
// encountered a type error
state: Draft<Conversation | null>,
action: PayloadAction<Conversation>
) => action.payload,
},
});
// Action creators are generated for each case reducer function
export const { setConversation } = conversationSlice.actions;
export default conversationSlice.reducer;