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

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的动作创建器，该动作将由某些还原器处理以更新状态。

如果您的主应用是connected(请参阅React-Redux(，它将自动更新，因此您确实不应该执行整个页面重新加载。