I am learning react universal rendering with redux. I am following github.com/erikras/react-redux-universal-hot-exam… to include SSR feature in my react-redux webapp. The differences in my architecture are, I am not using Ducks modules as in the example. I am also using isomorphic-fetch instead of superagent. And I am not using any promise middleware since fetch itself return promise to async connect. So my async call looks something like this
/* 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
});
});
};
}
But I am facing a strange issue. I have a popup for sign in in my app (not from router). And the api call for signing in is completely handled on client side. After signing in I am storing user email in redux state. But when I refresh the browser, all the values in redux state become null. So I get null for getState().userProfile.email in the userAction.js.
All I want is to retain the state on page reload (server rendering). I have searched a lot for any solution. But couldn't figure out anything. I may be missing something in the redux flow.
Sidhant Panda
Programmer
You need to store the login in your session or localstorage.
Erikras repo stores the login in session by default. And redux state won't be maintained between page refreshes. Redux state will only be maintained till the time you are in the app. Once you navigate away, the redux store will be lost.
You can check github.com/rt2zz/redux-persist to persist redux store across sessions.