I have been struggling to find a solution. I have asked multiple questions on different platforms but haven't received any helpful answers. Can someone please assist me? Your help is greatly needed and appreciated. Please take some time out of your busy schedule.
My issue involves configuring Redux toolkit (@reduxjs/toolkit
) with next redux wrapper(next-redux-wrapper
). However, I am encountering a problem.
The specific error message I am facing is-
Type error: Type '(state: ReturnType<typeof combinedReducer>, action: AnyAction) => any' is not assignable to type 'Reducer<CombinedState<{ counter: { value: any; }; }>, AnyAction> | ReducersMapObject<CombinedState<{ counter: { value: any; }; }>, AnyAction>'.
The error is originating from Store.ts-
import { Action, AnyAction, combineReducers, configureStore, ThunkAction } from '@reduxjs/toolkit';
import { createWrapper, HYDRATE } from 'next-redux-wrapper';
import { getMovies } from "./Reducer/movieReducer";
const combinedReducer = combineReducers({
counter: getMovies
});
const reducer = (state: ReturnType<typeof combinedReducer>, action: AnyAction) => {
if (action.type === HYDRATE) {
const nextState = {
...state,
...action.payload,
};
return nextState;
} else {
return combinedReducer(state, action);
}
};
export const makeStore = () => configureStore({ reducer }); //The issue lies here in the reducer
type Store = ReturnType<typeof makeStore>;
export type AppDispatch = Store['dispatch'];
export type RootState = ReturnType<Store['getState']>;
export type AppThunk<ReturnType = void> = ThunkAction<
ReturnType,
RootState,
unknown,
Action<string>
>;
export const wrapper = createWrapper(makeStore);
The line causing the error is-
export const makeStore = () => configureStore({ reducer });
You can refer to the following image for a clearer understanding of the error- https://i.sstatic.net/1ZevS.png
Your assistance is much needed and appreciated. I have been stuck on this for over a month now without finding a solution. Please help me. Thank you.