我正在学习使用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流程中遗漏一些东西。