2

I repeatedly get a Could not find router reducer in state tree, it must be mounted under "router" error when I do a dispatch(push("/")); call.

index.tsx

const store = configureStore();

ReactDOM.render(
    <Provider store={store}>
        <ConnectedRouter history={history}>
            <Switch>
                <Route exact path="/" component={HomeScreenContainer} />
                <Route exact path="/login" component={LoginScreenContainer} />
            </Switch>
        </ConnectedRouter>
    </Provider>,
    document.getElementById('root'),
);

configureStore.ts

export const history = createBrowserHistory();

export default function configureStore(preloadedState?: any) {
    const store = createStore(
        createRootReducer(history),
        preloadedState,
        composeWithDevTools(applyMiddleware(thunk, routerMiddleware(history))),
    );

    return store;
}

reducers.ts

const createRootReducer = (history: History<any>) =>
    combineReducers({
        router: connectRouter(history),
        login: LoginReducer,
    });

export default createRootReducer;

Upon clicking a submit button on my login form, I dispatch to a loginAsync action creator:

export const loginAsync = (login: LoginCredentials) => {
    return (dispatch: any) => {
        if (login.username != 'me@example.com' || login.password != '1234') {
            dispatch({
                type: SET_LOGIN_ERROR_MESSAGE,
                message: 'Invalid username/password',
            });
        } else {
            console.log('SUCCESS LOGIN');
            dispatch(replace('/')); // ERROR HERE
        }
    };
};

My console shows that the SUCCESS LOGIN message is printed but the above error message shows immediately following.

If I look at the URL, the URL appears to navigate to the proper path "/" but the screen still shows the login form and not my homepage.

Any help would be greatly appreciated.

noblerare
  • 10,277
  • 23
  • 78
  • 140

0 Answers0