Facing Issue with Next Redux Wrapper on Typescript on latest version

[hbole]

Describe the bug

Getting a couple of type errors while creating the store. This error started coming in when I upgraded the wrapper from version 6.0.2 to 7.0.2 Errors are as below:

Type '(context: Context) => Store<any, AnyAction> & { dispatch: unknown; }' is not assignable to type 'MakeStore<State>'.
Property 'Auth' is missing in type 'Store<any, AnyAction> & { dispatch: unknown; }' but required in type 'State'. ts(2322) [13, 14]

reducers.tsx[7, 2]: 'Auth' is declared here.

Type 'State' does not satisfy the constraint 'Store<any, AnyAction>'.
Type 'State' is missing the following properties from type 'Store<any, AnyAction>': dispatch, getState, subscribe, 
replaceReducer, [Symbol.observable] ts(2344) [13, 55]

Type 'State' does not satisfy the constraint 'Store<any, AnyAction>'.
Type 'State' is missing the following properties from type 'Store<any, AnyAction>': dispatch, getState, subscribe, replaceReducer, [Symbol.observable] ts(2344) [27, 38]

Attaching the code, and screenshots of the code & error given above. The same code works without throwing an error with next-redux-wrapper v6.0.2 not sure what has changed on the latest version.

To Reproduce

There is no template created on CodeSandBox as this is typescript related or syntactical error

Steps to reproduce the behavior: Code snippets

store -> index.tsx

import { createStore, applyMiddleware, Store } from 'redux';
import createSagaMiddleware, { Task } from 'redux-saga';
import { MakeStore, createWrapper, Context } from 'next-redux-wrapper';

import rootReducer, { State } from './reducers';
import rootSaga from './sagas';

export interface SagaStore extends Store {
  sagaTask?: Task;
}

export const makeStore: MakeStore<State> = (context: Context) => {
  // 1: Create the middleware
  const sagaMiddleware = createSagaMiddleware();

  // 2: Add an extra parameter for applying middleware:
  const store = createStore(rootReducer, applyMiddleware(sagaMiddleware));

  // 3: Run your sagas on the server
  (store as SagaStore).sagaTask = sagaMiddleware.run(rootSaga);

  // 4: now return the store:
  return store;
};

export const wrapper = createWrapper<State>(makeStore, {debug: true});`

store -> reducers.tsx

import { combineReducers, AnyAction } from "redux";
import { HYDRATE } from "next-redux-wrapper";

import Auth from "./auth/reducer";

export type State = {
    Auth: any;
};

const rootReducer = (state: State, action: AnyAction) => {
    switch (action.type) {
        case HYDRATE:
            return action.payload;

        default: {
            const combineReducer = combineReducers({
                Auth,
            });
            return combineReducer(state, action);
        }
    }
};
export type RootState = ReturnType<typeof rootReducer>;
export default rootReducer;

Expected behavior

The above code snippets work absolutely fine with next-redux-wrapper version 6.0.2 without throwing any type errors or syntactical errors. Expected next-redux-wrapper version 7.0.2 to work in a similar way. But not working with the latest versions.

Screenshots

Attaching screenshots of code & the errors

1. store -> index.tsx

2. store -> reducers.tsx

errors

error on web

Desktop (please complete the following information):

• OS: Windows X (Shouldn't be OS specific)
• Browser: Chrome (Not browser-specific)

• Version: 94.0.4578.0 (Official Build) canary (64-bit)

  Please help me to resolve this issue. Currently using an older version 6.0.2 for the time being until this gets resolved. Thank you.

[phryneas]

Afaik in next-redux-wrapper 7, you should be using createWrapper<Store>(makeStore, {debug: true});, (where Store is ReturnType<typeof makeStore>) not createWrapper<State>(makeStore, {debug: true});

[HT-Moh]

Hi I am having the same issue more less

Argument of type '({ store }: Store<any, any>) => Promise<{ props: {}; }>' is not assignable to parameter of type 'GetStaticPropsCallback<Store<any, any>, any>'.
  Type 'Promise<{ props: {}; }>' is not assignable to type 'GetStaticProps<any, ParsedUrlQuery>'.
    Type 'Promise<{ props: {}; }>' provides no match for the signature '(context: GetStaticPropsContext<ParsedUrlQuery>): GetStaticPropsResult<any> | Promise<GetStaticPropsResult<any>>'.ts(2345)

export const getStaticProps = wrapper.getStaticProps(async ({ store}) => {
 ...
  return {
    props: {},
  };
});

const reducer = (state: any, action: any) => {
    if (action.type === HYDRATE) {
        const nextState = {
        ...state, // use previous state
        ...action.payload, // apply delta from hydration
        };
        return nextState;
    }
    return RootReducers(state, action);
};
export const initStore = () =>
  createStore(reducer, bindMiddleware([thunkMiddleware]));

export type AppRootStateType = ReturnType<typeof RootReducers>;

export const wrapper = createWrapper<ReturnType<typeof initStore>>(initStore);

please note that I made comment here as well, not sure if the same issue https://github.com/kirill-konshin/next-redux-wrapper/issues/407

[HT-Moh]

I fix it forget about it. :-) I change the line export const getStaticProps = wrapper.getStaticProps(async ({ store}) => {

to

export const getStaticProps = wrapper.getStaticProps(store => async context => {

[mezhinsky]

getting the same error in _App.tsx

class MyApp extends App { public static getInitialProps = async ({Component, ctx}: AppContext) => { const pageProps = { ...(Component.getInitialProps ? await Component.getInitialProps(ctx) : {}), };

    if (ctx.req) {
            ctx.store.dispatch(END);
            await (ctx.store as SagaStore).sagaTask?.toPromise();
    }

    return {
            pageProps,
    };

};