I'm working with MERN stack structure and Redux, I have a problem with isomorphic-fetch module.
I would like to user info from session, but isomorphic-fetch module seems that its request is seperated from users session.
following is the view dispatches an action to get user info from session.
MainView.jsx:
import React, { PropTypes } from 'react';
import { connect } from 'react-redux';
import * as Actions from '../../redux/actions/actions';
class MainView extends React.Component {
constructor(props) {
super(props);
this.displayName = 'MainView';
}
componentWillMount() {
if (this.props.showMessageModal.message !== '') {
this.props.dispatch(Actions.showMessageModal());
}
this.props.dispatch(Actions.fetchUserSession());
}
render() {
const renderTemp = () => {
if (this.props.user) {
return <div>{ JSON.stringify(this.props.user) }</div>;
}
};
return (
<div>
MainView
{ renderTemp() }
</div>
);
}
}
MainView.contextTypes = {
router: React.PropTypes.object,
};
function mapStateToProps(store) {
return {
showMessageModal: store.showMessageModal,
user: store.user,
};
}
MainView.propTypes = {
showMessageModal: PropTypes.object.isRequired,
dispatch: PropTypes.func.isRequired,
user: PropTypes.object,
};
export default connect(mapStateToProps)(MainView);
followings are action, reducer and router.
actions.js (only related codes):
import * as ActionTypes from '../constants/constants';
import Config from '../../../server/config';
import fetch from 'isomorphic-fetch';
const baseURL = typeof window === 'undefined' ? process.env.BASE_URL || (`http://localhost:${Config.port}`) : '';
export function getUserSession(user) {
return {
type: ActionTypes.GET_USER_SESSION,
user,
};
}
export function fetchUserSession() {
return (dispatch) => {
return fetch(`${baseURL}/api/session-user`)
.then((response) => response.json())
.then((response) => dispatch(getUserSession(response.user)));
};
}
reducer_user.js (combined in index reducer):
import * as ActionTypes from '../constants/constants';
export const user = (state = null, action) => {
switch (action.type) {
case ActionTypes.GET_USER_SESSION :
return action.user;
default:
return state;
}
};
user.router.js (api router):
import { Router } from 'express';
router.get('/api/session-user', (req, res) => {
console.log('req.user: ' + req.user);
res.json(req.user);
});
export default router;
After login, when I go to '/api/session-user' directly on browser, I can see the user info like this.
But when I load MainView and it dispatches action, 'req.user' in user.router.js returns 'undefined'.
Please guess what the wrong is. It would be very helpful.
I've figured out the problem. 'isomorphic-fetch' wasn't setting request cookie, so it couldn't get its session from the cookie. I've changed my code in action.js as below, and it's working perfectly.
export function fetchUserSession() {
return (dispatch) => {
return $.ajax({
url: `${baseURL}/api/session-user`,
success: (response) => {
dispatch(getUserSession(response));
},
});
};
I refered to this page - https://github.com/matthew-andrews/isomorphic-fetch/issues/75