React Redux Reducer triggered but not changing state - reactjs

Question

I am trying to set up app state with authenticated: true and user data.
Reducer gets to be triggered (I can see console.log) but it is returning initial state (isAuthenticated: false, user: {})
Thunk is working fine as far as I know
Props I am getting in component is {isAuthenticated: false, user{}}
I have done stuff like this before just like this so I am not sure why is this happening
import { AUTHENTICATED } from '../actions/types'
const initialState = {
isAuthenticated: false,
user: {}
}
export default function(state = initialState, action) {
switch (action.type) {
case AUTHENTICATED:
console.log(action.payload)
return {
...state,
isAuthenticated: true,
user: action.payload.user
}
default:
return state
}
}
action creator user.js
import axios from 'axios';
import history from '../history';
import config from '../config'
import { AUTHENTICATED } from './types';
export function authUser(token){
return function(dispatch){
const data = {"token": token}
axios.post(`${config.api_url}/authuser`, data)
.then((res) => {
dispatch({type: AUTHENTICATED, payload: res.data})
})
.catch((err) => console.log(err))
}
}
component dashboard.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import history from '../history';
import * as actions from '../actions/memberActions';
class Dashboard extends Component {
componentWillMount(){
const token = window.localStorage.getItem('token');
if(!token){
history.push('/')
}else{
this.props.authUser(token);
console.log(this.props.user);
}
};
render() {
return (
<div>
<h2>This will be a dashboard page</h2>
<p>There should be something here:{ this.props.authenticated }</p>
<h1>OK</h1>
</div>
)
}
}
function mapStateToProps(state){
return {
user: state.user
}
}
export default connect(mapStateToProps, actions)(Dashboard);

Answer 1

You're checking props.user in componentWillMount, which doesn't show your updates.
Instead check the state change in your render method, or in another life-cycle handler method like componentWillReceiveProps.

Answer 2

Your code should be something like this
export default function(state = initialState, action) {
switch (action.type) {
case AUTHENTICATED:
console.log(action.payload)
return state = {
...state,
isAuthenticated: true,
user: action.payload.user
}
default:
return state
}
}

Answer 3

From the looks of it, seems like your res.data object, in dispatch({type: AUTHENTICATED, payload: res.data}) does not have an user property.
So when you do user: action.payload.user you're basically saying user: undefined.
Please post your console.log(res.data) to see if this is the problem.