Type error with Redux Toolkit and Next Redux Wrapper in typescript?

Question

I am trying to get one solutions. I ask several question with the same matter in stacks. But No one answering my questions. If someone answer this, the give wrong information. Can anybody help me, please. I need really your help, please. Please give some time from your valuable time.

I want to configure Redux toolkit (@reduxjs/toolkit) with next redux wrapper(next-redux-wrapper). But I am facing one problem.

The error 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>'.

Error occurred in 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 }); //I am facing problem here in 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);

I find error in this line-

export const makeStore = () => configureStore({ reducer });

You can see image for better understanding error-

Please give some time from your valuable times. Please help me. I am stacking it over 1 month. I am trying but not getting any solutions. Please help me. Please help me.

Hard to see from the description alone. If you could provide a code sandbox or a github repo I can help you :) — Laurenz Honauer
– Laurenz Honauer, Commented May 1, 2022 at 16:44
@LaurenzHonauer. Please. Help me. I am stacking with this for 1 month. I am not getting any solutions. — user19007397
– user19007397, Commented May 1, 2022 at 16:51

phry · Accepted Answer · 2022-05-01 17:00:00Z

4

Every reducer has to be able to be called with undefined.

To fix the proble, do

const reducer = (state: ReturnType<typeof combinedReducer>, action: AnyAction) => {

Although I'd do

const reducer: typeof combinedReducer = (state, action) => {

instead.

answered May 1, 2022 at 17:00

phry

44.9k7 gold badges96 silver badges111 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user19007397 Over a year ago

You are boss. Thank you very much.

Laurenz Honauer · Accepted Answer · 2022-05-01 16:59:29Z

0

Is there actually an Error happening in the App?

To me, it looks like Typescript just doesn't understand that your reducer actually is of Type Reducer.

When I add the following, the error disappears:

answered May 1, 2022 at 16:59

Laurenz Honauer

3421 silver badge17 bronze badges

1 Comment

phry Over a year ago

Please don't do a Reducer annotation that omits the State generic, that will erase all state type info over the whole app.

Collectives™ on Stack Overflow

Type error with Redux Toolkit and Next Redux Wrapper in typescript?

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related