Cannot do routing within Redux Observable epic

Question

There are very similar problems asked already but none of them works or they are different from my case.

My goal: I want to change the '/login' route to '/' route within my redux Observable epic. I'd like to do a simple login and when the authentication is success then it should go to the home page.

What I already tried: Simply used { push } from 'connected-react-router'; method like mapTo(push('/login')) but the location changed but stuck on login page. I also managed to inject the history object but I've got "TypeError: Cannot read property 'type' of undefined" error. I also tried to downgrade the connected-react-router version how it was suggested in other thread but that didn't help either.

I'm very new in Redux Observable so I might miss a very basic stuff here but I couldn't really find good examples.

Here is the related code from my epic:

const login: Epic = action$ =>
    action$.pipe(
        ofType(LOGIN),
        mergeMap(({ payload }) =>
            from(API.post<LoginResult>('/oauth/token', $.param({...payload, grant_type: "password"}),
                ({auth: {
                    username: 'xxxx',
                    password: 'xxxx'
                }})
            )).pipe(
                map(({ data }) => loginSuccessAction(data)),
                catchError(err => of(loginErrorAction(err)))
            )
        )
    );


const loginSuccess: Epic = (action$) =>
    action$.pipe(
        ofType(LOGIN_SUCCESS),
        map(({ data }) => fetchProfileAction(data))
    );


const fetchProfile: Epic = (action$, state$) =>
        action$.pipe(
        ofType(FETCH_PROFILE_REQUEST),
        mergeMap(({ payload }) =>
            from(API.get<Profile>('/REST/v1/profile', {headers: {'Authorization': "Bearer " + state$.value.auth.auth.accessToken}}
            )).pipe(
                map(({ data }) => fetchProfileSuccessAction(data)),
                catchError(err => of(loginErrorAction(err)))
            )
        )
    );

const fetchProfileSuccess: Epic = action$ =>
    action$.pipe(
        ofType(FETCH_PROFILE_SUCCESS),
        tap(({action}) => {console.log(action$); debugger;}),
        //mapTo(push('/login')) // if I do this then the url changes to '/' but I'm still stucked on the login page
        mapTo(history.push('/login')) // if I do this then I've got "TypeError: Cannot read property 'type' of undefined" error 
    );

cofigureStore.ts:

export function configureStore() {
    const epicMiddleware = createEpicMiddleware<
        AllActions,
        AllActions,
        AppState
    >();

    const store = createStore(
        rootReducer(history),
        composeWithDevTools(
            applyMiddleware(epicMiddleware, routerMiddleware(history))
        )
    );

    epicMiddleware.run(rootEpic);
    return store;
}

history.ts:

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

App.ts:

export default function App() {

    let configureStore: Function;

    configureStore = require('./store/cofigureStore').configureStore;

    const store = configureStore();

    return (
        <Provider store={store}>
            <BrowserRouter basename={basename}>
                <Routes />
            </BrowserRouter>
        </Provider>
    );
}

Many thanks for any help!

Answer 1

It seems that I missed something basic. The solution was that I used BrowserRouter in my App.tsx:

        <Provider store={store}>
            <BrowserRouter basename={basename}>
                <Routes />
            </BrowserRouter>
        </Provider>

But I should've used ConnectedRouter like this:

        <Provider store={store}>
            <ConnectedRouter history={history}>
                <Routes />
            </ConnectedRouter>
        </Provider>