重新加载

时间:2017-08-23 19:33:37

标签: reactjs redux react-redux isomorphic-javascript serverside-rendering

我正在学习使用redux进行通用渲染。我正在关注https://github.com/erikras/react-redux-universal-hot-example以在我的react-redux webapp中包含SSR功能。我的架构的不同之处在于,我没有像示例中那样使用Ducks模块。我也使用isomorphic-fetch而不是superagent。而且我没有使用任何承诺中间件,因为fetch本身会返回对异步连接的承诺。所以我的异步调用看起来像这样

/* App.js */
@asyncConnect([{
promise: ({store: {dispatch, getState}}) => {
    let promises = [];
    promises.push(dispatch(getUserProfile()));
    return Promise.all(promises);
    }
}])

class App extends Component {
...
}
function mapStateToProps(state) {
    return {
        userProfile: state.userProfile
    }
}
export default connect(mapStateToProps)(App);

/* userAction.js */
export function getUserProfile() {
return function(dispatch, getState) {
    const email = getState().userProfile.email;
    dispatch({type: actions.GET_USER_PROFILE});
    return fetch(constants.BASE_API_URL + urls.GET_USER_PROFILE, {
        method: 'POST',
        headers: commonHeaders,
        body: JSON.stringify({ email })
    })
    .then(checkHttpStatus)
    .then(parseJSON)
    .then(jsonResponse => {
        dispatch({
            type: actions.GET_USER_PROFILE_SUCCESS,
            sessionId
        });
    })
    .catch((error) => {
        dispatch({
            type: actions.GET_USER_PROFILE_FAILED,
            errorMessage: error.message
        });
    });
};
}

但我面临一个奇怪的问题。我有一个用于在我的应用程序中登录的弹出窗口(不是来自路由器)。 api呼叫登录完全在客户端处理。登录后我将用户电子邮件存储在redux状态。但是当我刷新浏览器时,redux状态中的所有值都变为null。 因此,getState().userProfile.email中的userAction.js为空。

我想要的只是在页面重新加载(服务器渲染)上保留状态。我已经搜索了很多解决方案。但无法弄清楚任何事情。我可能会在redux流程中遗漏一些东西。

0 个答案:

没有答案