无法在Redux Observable史诗中进行路由

Question

已经问过非常类似的问题，但是它们都不起作用，或者与我的情况不同。

我的目标：我想在Redux Observable史诗中将'/ login'路由更改为'/'路由。我想进行一次简单的登录，当身份验证成功后，它应该转到主页。

我已经尝试过的：从“ connected-react-router”中简单使用{push}；类似于mapTo（push（'/ login'））的方法，但位置已更改，但停留在登录页面上。我还设法注入了历史对象，但出现了“ TypeError：无法读取未定义的属性'type'”错误。我还尝试按照其他线程中的建议将连接的反应路由器版本降级，但这也无济于事。

我是Redux Observable的新手，所以我可能在这里错过了一些非常基本的内容，但是我找不到真正的好例子。

这是我的史诗中的相关代码：

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

非常感谢您的帮助！

Answer 1

似乎我错过了一些基本的知识。解决的办法是我在App.tsx中使用BrowserRouter：

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

但是我应该这样使用ConnectedRouter：

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