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

我正在使用auth0来验证我的用户。当我的用户选择提供商时，会打开一个弹出窗口，以便他可以选择一个帐户进行登录。维护从弹出窗口到主窗口的Redux状态

现在，使用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>;

如果我执行这段代码后inpect我的状态，我看到所有的数据都是正确存储在州。

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

所以我想，也许我不得不重新加载主窗口，看看状态是否已经改变，但是，当使用window.opener.location.reload();时，页面刷新之前刷新所有数据，因此我的状态仍然是空的。

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

来源

2017-04-20 Pierre Olivier Tran

使用'location.reload（）'你只能在localStorage或cookie中存储数据。 – elmeister

我知道，但我认为国家应该保持，即使重新加载后？ –

不，该状态仅在您的网络应用程序的该实例中维护。当你打开一个新的窗口（如弹出窗口），这是一个不同的Web应用程序实例。如果你想在实例之间共享状态，它必须在localStorage或服务器上。 – ArneHugo

你应该派遣一个动作，通过reducer更新你的redux商店。例如在弹出组件，你会做这样的事情：

this.props.dispatch(setAuthData(data))

你应该有一个行动的创建者叫setAuthData将通过一些减速处理，以更新的状态。

如果你的主应用是connected（见react-redux）它会自动更新，所以你真的不应该执行整个页面重新加载。

来源

2017-04-20 08:50:38 thedude

谢谢！查看我的编辑 –

@PierreOlivierTran你能分享你的reducer和商店代码吗？ – thedude

我编辑过，以便您可以看到整个减速器。 –

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

回答

相关问题