title: Im am getting undefined with mapstatetoprops
body: <p>I am trying pass logged data from my redux actions to the front end but keep getting user.name of null or undefined. </p>
  
  <p>This is the front end where I am simply trying to get user.name to appear so that it says Hi user.name(name of persons account).</p>
  
  <pre><code> import React, { Component } from "react";
   import { NewPropertyForm, FormPageOne, FormPageTwo, FormPageThree, 
   FormPageFour } from "../../components/NewPropertyForm";
   import { PropertyList } from "../../components/PropertyList";
   import { Container, Button, Modal, ModalCard, ModalCardTitle, 
  ModalBackground, ModalCardFooter, ModalCardHeader, Delete, ModalCardBody 
  } from 'bloomer';
   import StepZilla from "react-stepzilla";
  import modal from "./modal-bg.svg";
  import "./Manager.css";
  import {login} from '../../actions/authActions'
  
  
   import {connect} from 'react-redux';
  import { bindActionCreators } from 'redux'
  
   const steps =
  [
    {name: 'Step 1', component: &lt;FormPageOne /&gt; },
    {name: 'Step 2', component: &lt;FormPageTwo /&gt; },
    {name: 'Step 3', component: &lt;FormPageThree /&gt; },
    {name: 'Step 4', component: &lt;FormPageFour /&gt; }
  ]
  
   const modalBG = { backgroundImage: `url(${modal})` }
  
   export class Manager extends Component {
   // Setting our component's initial state
  state = {
  modal: "",
  };
  
  modalOpen = () =&gt; {
  this.setState({ modal: "is-active" })
  }
  
  
  
  modalClose = () =&gt; {
  this.setState({
    modal: "",
    login: "",
   })
  }
  
  
  render() {
  let { user } = this.props;
  return (
    &lt;div className="manager"&gt;
      &lt;Container className="manager-container"&gt;
        &lt;div className="columns"&gt;
          &lt;div className="column"&gt;
            &lt;h1 className="title"&gt;Hi {user.name}&lt;/h1&gt;
            &lt;h2 className="sub-title"&gt;You currently have 3 properties&lt;/h2&gt;
            &lt;h2 className="sub-title"&gt;Check out the new applications you 
   received.&lt;/h2&gt;
          &lt;/div&gt;
          &lt;div className="column user-dash-right"&gt;
            &lt;Button 
            isColor='primary' 
            className="" 
            onClick={this.modalOpen}&gt;&lt;p&gt;Create Listing&lt;/p&gt;&lt;/Button&gt;
  
          &lt;/div&gt;
  
        &lt;/div&gt;
  
        &lt;h1 className="title has-text-centered"&gt;My Properties&lt;/h1&gt;
        &lt;PropertyList /&gt;
  
  
          &lt;div className="new-property-modal"&gt;
            &lt;Modal className={this.state.modal}&gt;
  
              &lt;ModalBackground /&gt;
              &lt;ModalCard style={ modalBG } &gt;
  
                  &lt;ModalCardBody&gt;
                      &lt;Delete onClick={this.modalClose} /&gt;
  
                      &lt;div className='step-progress'&gt;
                          &lt;StepZilla
                            steps={steps}
                            showSteps={false}
                            nextButtonCls="button is-medium is-primary"
                            backButtonCls="button is-medium is-primary"
                            /&gt;
                      &lt;/div&gt;
  
                &lt;/ModalCardBody&gt;
  
  
            &lt;/ModalCard&gt;
            &lt;/Modal&gt;
          &lt;/div&gt;
  
  
      &lt;/Container&gt;
    &lt;/div&gt;
  );
  }
  }
  
  const mapStateToProps = ({auth}) =&gt; ({
  user: auth.user,
  authError: auth.authError
  });
  
  export default connect(mapStateToProps)(Manager)
  </code></pre>
  
  <p>This is the actions I have setup</p>
  
  <pre><code>import API from "../utils/API";
  import { IS_AUTHENTICATED, AUTHENTICATION_FAILED } from 
  '../constants/actionTypes';
  
  export const signup = ({name, email, phonenumber, password, role}) =&gt; 
  async dispatch =&gt; {
  
  try {
      const {data} = await API.saveUser({
        name,
        email,
        phonenumber,
        password,
        role
  
      })
      dispatch({
          type: IS_AUTHENTICATED,
          payload: data.user
      })
      console.log('--success', data);
  
    } catch(error) {
      console.error(error);
      console.log('Come on work damnit')
    }
  }
  
  export const login = ({email, password}) =&gt; async dispatch =&gt; {
  
  try {
      const {data} = await API.loginUser({
        email,
        password
  
      })
      dispatch({
          type: IS_AUTHENTICATED,
          payload: data.user
      });
      console.log('--success', data.user.name);
    } catch(error) {
      dispatch({
          type: AUTHENTICATION_FAILED,
          payload: "Invalid credentials, cannot login"
      });
      console.error(error);
    }
  }
  
  export const getAuthenticated = () =&gt; async dispatch =&gt; {
  try {
      const {data, error} = await API.getAuthenticated();
      console.log(data);
      if(data) {
          dispatch({
              type: IS_AUTHENTICATED,
              payload: data
          });
      } else {
          console.log('ssss', error)
      }
      // if(getUser) login
      //else logout
  } catch(error) {
      //window redirect to login
  }
  }
  
  
  export const logout = () =&gt; async dispatch =&gt; {
  try {
      // const revoke = await API.logout()
      dispatch({
          type: IS_AUTHENTICATED,
          payload: null
      });
      //should automatically display logout nav 
      //or redirect to anther page
  } catch(e) {
      //just refresh page
  }
  }
  </code></pre>
  
  <p>and these are my reducers</p>
  
  <pre><code>import {
  IS_AUTHENTICATED,
  AUTHENTICATION_FAILED
  } from '../constants/actionTypes';
  
  const initialState = {
  user: null
  }
  
  const authReducer = (state = initialState, {type, payload}) =&gt; {
  switch(type) {
      case IS_AUTHENTICATED:
          return {...state, user: payload, userInfo: payload}
      case AUTHENTICATION_FAILED:
          return {...state, user: null, authError: payload}
      default:
          return state
  }
  }
  
  export default authReducer;
  </code></pre>
  
  <p>As you can see I tried to pass user.name but i keep getting cannot read property of null if I do const { user } = this.props
  and i get cannot read property of undefined if i do const { user } = this.state.</p>