redux: combineReducers is broken with TypeScript 2.6.1 and Redux 3.7.2

Not very satisfying, but I’ve found that asserting the ReducersObjectMap to any gets me compiling again.

const combinedReducers = combineReducers({ reducer1, reducer2 } as any);

Using the version 4 beta typings does not work for me.

Can this be reopened? It’s still a problem. Redux 4.0.4, TypeScript 3.7.2

Try to add “any” as an alternative data type in you reducer:

export function reducer(state = defaultState.count, action: ActionTypes | any) { … }

redux 4.0.5 typescript 3.8.3

issue persists

edit: I found a solution, simply pass you store state type to combineReducers and the error goes away

@timdorr I am actually using payload in action props. However, I changed my code to resemble to what @lenguyenthanh posted. Still no luck.

import { combineReducers } from 'redux';

export enum SellerActionKeys {
    LOAD_SELLER = 'LOAD_SELLER',
    ADD_SELLER = 'ADD_SELLER'
}

export interface SellerLoadAction {
    readonly type: SellerActionKeys.LOAD_SELLER;
    readonly payload: {
        readonly name: string;
    };
}

export interface SellerAddAction {
    readonly type: SellerActionKeys.ADD_SELLER;
    readonly payload: {
        readonly name: string;
    };
}

export type ActionTypes = SellerLoadAction | SellerAddAction;

export const seller = (state: any = { name: '' }, action: ActionTypes) => {
    switch (action.type) {
        case SellerActionKeys.LOAD_SELLER:
        case SellerActionKeys.ADD_SELLER:
            return {
                ...state,
                name: action.payload.name
            };
        default: return state;
    }
};

export const reducers = combineReducers({
    seller
});

Error:

$ tsc
src/App.tsx(7,34): error TS2345: Argument of type '{ seller: (state: any, action: ActionTypes) => any; }' is not assignable to parameter of type 'ReducersMapObject<{ seller: any; }, Action<any>>'.
  Types of property 'seller' are incompatible.
    Type '(state: any, action: ActionTypes) => any' is not assignable to type 'Reducer<any, Action<any>>'.
      Types of parameters 'action' and 'action' are incompatible.
        Type 'Action<any>' is not assignable to type 'ActionTypes'.
          Type 'Action<any>' is not assignable to type 'SellerAddAction'.
            Property 'payload' is missing in type 'Action<any>'.

I think, after introduction to strictFunctionTypes switch with Typescript 2.6.1, Action<any> and any extended interface will not match. I am not sure how @lenguyenthanh managed to compile his code with TS@2.6.1 and Redux@4.0.0-beta.1, but I could only compile by setting strictFunctionTypes: false in tsconfig.json.

Using Typescript 3.2.4 and Redux 4.0.1, the issue remains. Used @seepel solution for now.

Thank you so much for answer. Should we keep it open for other people see it? I couldn’t search an issue for it before.

Same problem : Typescript : 3.6.3 and Redux 4.0.4

Force to cast as any, an so I don’t have any autocomplete on my mapStateToProps’ state 😦

If you want an alternative to have the autocomplete in your mapStateToProps

const mapStateToProps = (state: any): StateProps => {
  return {
    quizData: (state as IStore).quizz.results
  }
}

The IStore is just an Interface made of all my Reducers’s InitialState

export interface IStore {
    quizz: IQuizInitialState
}

Not very satisfying, but I’ve found that asserting the ReducersObjectMap to any gets me compiling again.

const combinedReducers = combineReducers({ reducer1, reducer2 } as any);

Using the version 4 beta typings does not work for me.

it will break the typing, if you need to types store base on the rootReducer as I do here

export type RootState = ReturnType<typeof rootReducer>;

instead, this worked for me const persistor = persistStore(store as any);

@tipng I am using this workaround without disabling strictFunctionTypes:

export type ActionTypes = SellerLoadAction | SellerAddAction;

const seller = (state: any = { name: '' }, action: ActionTypes) => {
    switch (action.type) {
        case SellerActionKeys.LOAD_SELLER:
        case SellerActionKeys.ADD_SELLER:
            return {
                ...state,
                name: action.payload.name
            };
        default: return state;
    }
};
export default (state: any, action: Action<string>) => seller(state, action as ActionTypes);

I hope it helps.

These are on the next tag on npm right now with 4.0.0-beta.1. npm install redux@next