Can't get Connected React Router set up properly

Question

I'm trying to update to connected-react-router while updating all my React, Redux and Router versions. I am having trouble with the root reducer and store creation.

The previous reducer code that was working was...

const appReducer = combineReducers({...reducers, router: connectRouter});

export const rootReducer = (state: IAppState, action: IAppAction) => {
    return appReducer(state, action);
};

And for index.ts was:

import 'rxjs';
import { createStore, applyMiddleware, compose} from 'redux';
import { createEpicMiddleware } from 'redux-observable';
import { routerMiddleware } from 'connected-react-router';
import { logger } from 'redux-logger';
import { api, endPointKeys } from '../config';
import { IEpicDependency } from '../models';
import { rootReducer} from './root-reducer';
import { rootEpic } from './root-epic';
import { appHistory } from '../app-history';

const dependencies: IEpicDependency = { api, endPointKeys };
const epic = createEpicMiddleware(rootEpic, { dependencies });
const middlewareList = [epic, logger, routerMiddleware(appHistory())];
const windowlfDefined = typeof window === 'undefined' ? null: window as any;
const composeEnhancers = windowlfDefined.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__   || compose;
const middlewares = composeEnhancers( applyMiddleware(... middlewareList));
const store = createStore(rootReducer, middlewares);
export { store };

Now that I add in connectRouter...

import { combineReducers } from 'redux';
import { connectRouter } from 'connected-react-router';
import { IAppState } from './state';
import { IAppAction } from './app-action';
import { reducers } from './reducers';
import { History} from 'history'

export const rootReducer = (state: IAppState, action: IAppAction,history: History) => combineReducers({...reducers, router: connectRouter(history)});

it produces the error for router of...

Type '(reducer: Reducer) => Reducer' is not assignable to type 'Reducer, AnyAction>'. Types of parameters 'reducer' and 'state' are incompatible. Type 'Reducer<{ router: RouterState; }, AnyAction> | undefined' is not assignable to type 'Reducer<{ router: RouterState; }, AnyAction>'. Type 'undefined' is not assignable to type 'Reducer<{ router: RouterState; }, AnyAction>'.

I don't fully understand why state and action were able to not be passed before but by adding the history parameter, index.ts now demands three parameters be passed and I don't know that there's anything passable in this situation. How do I change this to get it working? Thanks in advance

Answer 1

Found how to do it!

const appReducer = (history) => combineReducers({
    reducers...
    router: connectRouter(history)
  })

const rootReducer = (state, action, history) => {

  if (action.type === LOGIN && action.payload) {
    state.forgot = null;
  } else if (action.type === LOGOUT) {
    state = undefined
  }

  return appReducer(history)(state, action);
}