Redux's combineReducers and TypeScript

Question

I'd like to use react-intl-redux and redux-form in my react app but I have a trouble doing the right thing while using combineReducers. I've tried many things but still couldn't figure it out.

react-intl-redux

import { combineReducers } from "redux";
import { intlReducer, IntlState } from "react-intl-redux";

export interface IAppState {
  intl: IntlState;
}

export default combineReducers<IAppState>({
  intl: intlReducer
});

[ts] Argument of type '{ intl: (state: IntlState, action: IntlAction) => IntlState; }' is not assignable to parameter of type 'ReducersMapObject'. Types of property 'intl' are incompatible. Type '(state: IntlState, action: IntlAction) => IntlState' is not assignable to type 'Reducer'. Types of parameters 'state' and 'state' are incompatible. Type 'IntlState | undefined' is not assignable to type 'IntlState'. Type 'undefined' is not assignable to type 'IntlState'. (alias) function intlReducer(state: IntlState, action: IntlAction): IntlState import intlReducer

redux-form

import { combineReducers } from "redux";
import { reducer as formReducer, FormState } from "redux-form";

export interface IAppState {
  form: FormState;
}

export default combineReducers<IAppState>({
  form: formReducer
});

[ts] Argument of type '{ form: FormReducer; }' is not assignable to parameter of type 'ReducersMapObject'. Types of property 'form' are incompatible. Type 'FormReducer' is not assignable to type 'Reducer'. Types of parameters 'state' and 'state' are incompatible. Type 'FormState | undefined' is not assignable to type 'FormStateMap'. Type 'undefined' is not assignable to type 'FormStateMap'. (alias) const formReducer: FormReducer import formReducer

Answer 1

Try FormStateMap instead of FormState.