1

我正在尝试更新到 connected-react-router,同时更新我所有的 React、Redux 和 Router 版本。我在根减速器和商店创建方面遇到问题。

以前工作的减速器代码是......

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; }, 任何动作> | undefined' 不可分配给类型 'Reducer<{ router: RouterState; },任何动作>'。类型 'undefined' 不能分配给类型 'Reducer<{ router: RouterState; },任何动作>'。

我不完全理解为什么之前不能传递状态和动作,但是通过添加历史参数,index.ts 现在要求传递三个参数,我不知道在这种情况下有什么可以传递的。如何更改它以使其正常工作?提前致谢

4

1 回答 1

2

找到了怎么做!

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);
}
于 2019-03-14T23:38:48.993 回答