Firestore reducer in TypeScript

Question

I've got the following piece of code for my reducers:

import { Reducer, combineReducers } from 'redux';
import { routerReducer } from 'react-router-redux';
import { firebaseReducer } from 'react-redux-firebase';
import { firestoreReducer } from 'redux-firestore';

const reducers: Reducer<ApplicationState> = combineReducers<ApplicationState>({
  firebase: firebaseReducer,
  firestore: firestoreReducer,
  router: routerReducer
});

export { reducers };

I was pretty much following tutorial that could be found here

However firestore reducer complains with the following message:

Argument of type '{ firebase: typeof firebaseReducer; firestore: typeof firestoreReducer; router: Reducer<RouterSta...' is not assignable to parameter of type 'ReducersMapObject'.
  Property 'firestore' is incompatible with index signature.
    Type 'typeof firestoreReducer' is not assignable to type 'Reducer<any>'.
      Type 'typeof firestoreReducer' provides no match for the signature '(state: any, action: AnyAction): any'.

What could be the issue and how to resolve it?

Answer 1

Seems like TS is looking for a Reducer in the spot that firebaseReducer is, but found something else. To see what that 'something else' is, I went to see the types, found this, and... become promptly confused. It looks like the types are more than just broken, they may as well not even be there. Casting it manually may be your best bet here.

const reducers: Reducer<ApplicationState> = combineReducers<ApplicationState>({
  firebase: firebaseReducer,
  firestore: firestoreReducer as Reducer<ApplicationState>,
  router: routerReducer
});

I'd also consider opening up an issue or PR for this. It's kind of baffling no one's run into this before.