combineReducers is broken with TypeScript 2.6.1 and Redux 3.7.2

[lenguyenthanh]

combineReducers is broken with TypeScript 2.6.1 and Redux 3.7.2

What is the current behavior?
Here is my code

import State from './state'
import { defaultState } from './state'
import { combineReducers, Reducer } from 'redux'
import { Dispatch, Store, Action } from 'redux'
import { reducer as count } from '../feature/counter/counterScreen'

export enum keys {
  INCREMENT = 'increment',
  DECREMENT = 'decrement',
}

interface IncrementAction {
  readonly type: keys.INCREMENT
  readonly payload: {
    readonly size: number
  }
}
const incrementAction = (size: number): IncrementAction => ({
  type: keys.INCREMENT,
  payload: {
    size: size,
  },
})

interface DecrementAction {
  readonly type: keys.DECREMENT
  readonly payload: {
    readonly size: number
  }
}
const decrementAction = (size: number): DecrementAction => ({
  type: keys.DECREMENT,
  payload: {
    size: size,
  },
})

export type ActionTypes = IncrementAction | DecrementAction

/** REDUCER */
export function reducer(state = defaultState.count, action: ActionTypes) {
  switch (action.type) {
    case keys.DECREMENT:
      return state - action.payload.size
    case keys.INCREMENT:
      return state + action.payload.size
    default:
      return state
  }
}

const rootReducers: Reducer<State> = combineReducers({ count })

export default rootReducers

and here is error:

yarn build v0.27.5
$ yarn run clean && yarn run lint && yarn tsc --
src/app/reducers.ts(53,54): error TS2345: Argument of type '{ count: (state: number | undefined, action: ActionTypes) => number; }' is not assignable to parameter of type 'ReducersMapObject'.
  Property 'count' is incompatible with index signature.
    Type '(state: number | undefined, action: ActionTypes) => number' is not assignable to type 'Reducer<any>'.
      Types of parameters 'action' and 'action' are incompatible.
        Type 'AnyAction' is not assignable to type 'ActionTypes'.
          Type 'AnyAction' is not assignable to type 'DecrementAction'.
            Property 'payload' is missing in type 'AnyAction'.

What is the expected behavior?
It should compile and work.

Which versions of Redux, and which browser and OS are affected by this issue? Did this work in previous versions of Redux?
Redux 3.7.2 and Typescript 2.6.1

Hot fix

It works well if I change Reducer definition in index.d.ts file:

export type Reducer<S, A extends AnyAction> = (state: S, action: A) => S;

And my reducer:

const rootReducers: Reducer<State, ActionTypes> = combineReducers({ count })

How do you think about this issue and hot fix?

[timdorr]

This is likely fixed on the next branch. Wait for a 4.0 prerelease or use the index.d.ts file from there now.

[lenguyenthanh]

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.

[mtgto]

Hi, I faced same trouble like @lenguyenthanh .
Is there any way to use HEAD definition instead of ./node_modules/redux/index.d.ts?

I try to put new definition file to "./typings/redux.d.ts", but it seems to be ignored while compiling.

Is there no way without overwrite ./node_modules/redux/index.d.ts?

[timdorr]

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

[mtgto]

@timdorr Thanks a lot!

[huestack]

@timdorr

I tried npm install redux@next, which duly added redux v4.0.0-beta.1, but still failed to compile. The error won't go away. Is there anything I can do?

$ tsc
src/App.tsx(8,33): error TS2345: Argument of type '{ seller: (state: SellerProps | undefined, action: SellerActionProps) => SellerProps; }' is not assignable to parameter of type 'ReducersMapObject<{ seller: SellerProps; }, Action<any>>'.
  Types of property 'seller' are incompatible.
    Type '(state: SellerProps | undefined, action: SellerActionProps) => SellerProps' is not assignable to type 'Reducer<SellerProps, Action<any>>'.
      Types of parameters 'action' and 'action' are incompatible.
        Type 'Action<any>' is not assignable to type 'SellerActionProps'.
          Property 'name' is missing in type 'Action<any>'.

App.tsx
reducer.tsx
package.json

[timdorr]

You should be putting that name property into the payload of the action.

[huestack]

@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.

[tipng]

@timdorr I am also facing the same issue here.

as @huestack said the only way to go around this so far was to disable the strictFunctionTypes flag in the tsconfig.

[huestack]

@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.

[seepel]

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.

[timdorr]

Check #2773. It needs a review.