Question

我在更新所有React，Redux和Router版本的同时尝试更新为connected-react-router。我在root reducer和商店创建方面遇到了麻烦。

以前有效的reducer代码是...

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

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

对于index.ts是：

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 };

现在，我在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)});

它会为...的路由器产生错误。

类型'（reducer：Reducer）=> Reducer'不可分配给'Reducer，AnyAction>'类型。参数“ reducer”和“ state”的类型不兼容。键入“ Reducer <{路由器：RouterState; }，AnyAction> |未定义”无法分配给“ Reducer <{路由器：RouterState; }，AnyAction>。无法将类型'undefined'分配给类型'Reducer <{router：RouterState; }，AnyAction>'。

我不完全理解为什么以前不能通过传递状态和动作，而是通过添加历史参数来实现，index.ts现在要求传递三个参数，我不知道在这种情况下有什么可传递的。如何更改此设置以使其正常工作？预先感谢

Answer 1

找到了怎么做！

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);
}

无法正确设置Connected React Router

1 个答案: