React redux - update object state with new value - reactjs

Question

I use Redux for the first time, and I don't success to update a state. Here is the workflow : User logged in the app (/login), a token is stored in sessionStorage, and I dispatch user info to access userData in the /dashboard/:id page.
Right now when I console.log props on the Dashboard components, here is the result :
userData : {}
So the object userData is still empty.
Here is the code :
LoginForm :
import React, { Component } from 'react';
import { Link } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import * as authActions from '../../actions/authActions';
class LoginForm extends Component {
constructor(props) {
super(props);
this.state = {
email: '',
password: '',
errors: {},
isLoading: false,
};
}
onChange(e) {
this.setState({
[e.target.name]: e.target.value
})
}
onSubmit(e) {
e.preventDefault();
this.setState({ errors: {}, isLoading: true });
this.props.actions.logInUser( { data: { user: { email: this.state.email, password: this.state.password }}})
}
render() {
return(
<div>
<form onSubmit={this.onSubmit.bind(this)}>
<div className="field">
<label className="label"> Email </label>
<div className="control">
<input type="email"
name="email"
value={this.state.email}
onChange={this.onChange.bind(this)}
className="input" />
</div>
</div>
<div className="field">
<label className="label"> Mot de passe </label>
<div className="control">
<input type="password"
ref="password"
name="password"
value={this.state.password}
onChange={this.onChange.bind(this)}
className="input" />
</div>
</div>
<div className="form-group">
<input type="submit" value="Signup" className="button is-primary" />
</div>
<Link to={{ pathname: '/register' }}>Inscription</Link>
</form>
</div>
);
}
}
function mapDispatchToProps(dispatch) {
return {
actions: bindActionCreators(authActions, dispatch)
};
}
export default connect(null, mapDispatchToProps)(LoginForm);
The authAction :
import { browserHistory } from 'react-router';
import * as types from './types';
import sessionApi from '../api/SessionApi';
export function loginSuccess(userData) {
return {
type: types.LOG_IN_SUCCESS,
payload: userData
}
}
export function loginFailed() {
return {
type: types.LOG_IN_FAILED
}
}
export function logInUser(credentials) {
return function(dispatch) {
return sessionApi.login(credentials)
.then(response => {
console.log(response);
if(response.data) {
sessionStorage.setItem('jwt', response.data.authentication_token);
dispatch(loginSuccess(response.data));
browserHistory.push('/dashboard/' + response.data.id);
} else {
dispatch(loginFailed());
}
})
.catch(error => {
throw(error);
})
}
}
The API :
import axios from 'axios';
class SessionApi {
static login(credentials) {
return axios.post('<link_hidden>', credentials)
.then(response => {
console.log(response);
return response;
})
.catch(error => {
return error;
});
}
}
export default SessionApi;
The session reducer (I have a rootReducer for combineReducer) :
import * as types from '../actions/types';
import initialState from './initialState';
export default function sessionReducer(state = initialState, action) {
switch(action.type) {
case types.LOG_IN_SUCCESS:
console.log(action);
return {
...state,
userData: action.payload
}
case types.LOG_IN_FAILED:
console.log('login failed');
break;
default:
return state;
}
}
and the initialState file :
export default {
session: !!sessionStorage.jwt,
userData: {}
}
Does someone know why the userData object is still empty ? In the session reducer I pass the userData so I don't understand ..
EDIT
dashboard.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
class Dashboard extends Component {
constructor(props) {
super(props);
console.log(props);
}
render() {
return(
<div>
<h1> Hello user </h1>
</div>
);
}
}
function mapStateToProps(state) {
const userData = state.sessionReducer.userData;
return { userData };
}
export default connect(mapStateToProps)(Dashboard);

Answer 1

Your code seems fine to me. Could you check your router if it's working correctly?

Answer 2

Try and change your userData to array, I think your payload may be an array of objects. That is:
export default {
session: !!sessionStorage.jwt,
userData: [ ]
}