0

已经提出了非常相似的问题，但它们都不起作用，或者它们与我的情况不同。

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

我已经尝试过的：简单地使用了'connected-react-router'中的{push}；像 mapTo(push('/login')) 这样的方法，但位置发生了变化，但卡在了登录页面上。我还设法注入了历史对象，但出现“TypeError：无法读取未定义的属性'类型'”错误。我还尝试将 connected-react-router 版本降级，它是如何在其他线程中建议的，但这也无济于事。

我是 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;
}

历史.ts：

import { createBrowserHistory } from 'history';

export const history = createBrowserHistory();

应用程序.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>
    );
}

非常感谢您的帮助！

4

1 回答 1

1

似乎我错过了一些基本的东西。解决方案是我在 App.tsx 中使用了 BrowserRouter：

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

但我应该像这样使用 ConnectedRouter：

        <Provider store={store}>
            <ConnectedRouter history={history}>
                <Routes />
            </ConnectedRouter>
        </Provider>
于 2020-02-20T13:39:39.133 回答