无法正确设置连接的 React 路由器



我正在尝试更新到连接的react路由器,同时更新我的所有react、Redux和router版本。我在根减少器和存储创建方面遇到了问题。

以前有效的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"one_answers"state"的类型不兼容。类型'减速器<{router:RouterState;},AnyAction>|undefined"不可分配给类型"Reducer<{router:RouterState;},AnyAction>'。类型"undefined"不可分配给类型"Reducer<{router:RouterState;},AnyAction>'。

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

找到了如何做到这一点!

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

相关内容

  • 没有找到相关文章

最新更新