Question

我正在使用auth0来验证我的用户。当我的用户选择提供商时，它会打开一个弹出窗口，以便他可以选择要登录的帐户。

现在，使用Auth0 sdk，我可以从提供商处获取用户信息（电子邮件，姓名等）。这一切都发生在我的弹出窗口中显示的组件中。

以下只检索一组信息，并且工作得很好。

[...]
            authenticationService.webAuth.client.userInfo(
                authResult.accessToken,
                (err2: any, user: any) => {
                    this.props.userActions.fetchProviderProfile(user);
                });

匹配行动：

import actions from './redux.actions';
import { authenticationService, restApi, routerHistory } from '../injector';
import { push } from 'react-router-redux';
import { AuthTokens } from '../service/AuthenticationTokensService';
import { Routes } from './../routes/ApplicationRoutes';

const initialState: UserState = {
    currentUser: undefined,
    users: new Map()
};

let userActions = {
    fetchProviderProfile: (profile) => (dispatch: (action: any) => void) => {
        dispatch({
            type: actions.user.prefillUser,
            profile
        });
    }
};

export default userActions;

export const userReducer = (state = initialState, action: any) => {
    switch (action.type) {
        case actions.user.prefillUser:
            return { ...state, currentUser: action.profile };
        default:
            return state;
    }
};

我的商店：

export const reduxStore = createStore(
    combineReducers({
        userState: userReducer,
        companyState: companyReducer,
        routing: routerReducer,
        form: formReducer
    }),
    compose(
        applyMiddleware(thunkMiddleware, routerMiddleware(routerHistory)),
        devTools
    )) as Store<ApplicationState>;

如果我在执行这段代码后检查了我的状态，我发现所有数据都已正确存储在状态中。

现在，棘手的部分：一旦获取数据，我想将它们置于我的应用程序状态，关闭弹出窗口，然后刷新我的主窗口。正如我所说，如果我检查弹出窗口，它们会出现在状态中，但是不会出现在主窗口状态（使用Chrome redux工具）。

所以我想，也许我必须重新加载主窗口以查看状态是否已更改，但是，当使用window.opener.location.reload();时，页面会在获取所有数据之前刷新，因此我的状态仍为空。

即使在关闭获取数据的弹出窗口时，如何保持弹出窗口到主窗口的状态？

Answer 1

您应该发送一个动作，通过减速器更新您的redux商店。例如在你的弹出组件中你会做这样的事情：

this.props.dispatch(setAuthData(data))

你应该有一个名为setAuthData的动作创建者，它将由一些减速器处理以更新状态。

如果您的主应用是[{1}}（请参阅react-redux），它会自动更新，因此您不应该执行整页重新加载。

将Redux状态从弹出窗口维护到主窗口

1 个答案: