title: User data coming back undefined with Redux React App
body: <p>Currently I am trying to pass user data through my react app with Redux.  I have created a user API with a django backend that is definately working, as I am able to go the url and see all the json that comes out of it.  However, when I try to pass it into a component I keep getting undefined.  Here is my code:</p>
  
  <p>userActions.js:</p>
  
  <pre><code>import Axios from "axios";
  
      export function getUser() {
        const id = this.params.match.id
        return dispatch =&gt; {
          dispatch(fetchUserBegin());
          return Axios.get(`/api/user/${id}`)
          .then((res) =&gt; {
            this.setState({
                user: res.data,
  
            })
          })
        }
      }
  
      export const FETCH_USER_BEGIN   = 'FETCH_USER_BEGIN';
      export const FETCH_USER_SUCCESS = 'FETCH_USER_SUCCESS';
      export const FETCH_USER_FAILURE = 'FETCH_USER_FAILURE';
  
      export const fetchUserBegin = () =&gt; ({
        type: FETCH_USER_BEGIN
      });
  
      export const fetchUserSuccess = user =&gt; ({
        type: FETCH_USER_SUCCESS,
        payload: { user }
      });
  
      export const fetchUserFailure = error =&gt; ({
        type: FETCH_USER_FAILURE,
        payload: { error }
      });
  </code></pre>
  
  <p>userReducer.js</p>
  
  <pre><code>import {  FETCH_USER_BEGIN, FETCH_USER_SUCCESS, FETCH_USER_FAILURE  } from '../actions/actionTypes'
  
  
  const initialState = {
      user: {},
      loading: false,
      error: null
    };
  
    export default function productReducer(state = initialState, action) {
      switch(action.type) {
        case FETCH_USER_BEGIN:
          // Mark the state as "loading" so we can show a spinner or something
          // Also, reset any errors. We're starting fresh.
          return {
            ...state,
            loading: true,
            error: null
          };
  
        case FETCH_USER_SUCCESS:
          // All done: set loading "false".
          // Also, replace the items with the ones from the server
          return {
            ...state,
            loading: false,
            user: action.user
          };
  
        case FETCH_USER_FAILURE:
          // The request failed, but it did stop, so set loading to "false".
          // Save the error, and we can display it somewhere
          // Since it failed, we don't have items to display anymore, so set it empty.
          // This is up to you and your app though: maybe you want to keep the items
          // around! Do whatever seems right.
          return {
            ...state,
            loading: false,
            error: action.payload.error,
            user: {}
          };
  
        default:
          // ALWAYS have a default case in a reducer
          return state;
      }
    }
  </code></pre>
  
  <p>And the display component:</p>
  
  <p>UserInformation.js:</p>
  
  <pre><code>import React from "react";
  import { connect } from "react-redux";
  import { getUser } from "../store/actions/userActions";
  
  class UserDetailView extends React.Component {
    componentDidMount() {
      this.props.dispatch(getUser());
    }
  
    render() {
      const { user } = this.props;
      console.log(user)
  
      return (
        &lt;ul&gt;
          {user.map(user =&gt;
            &lt;li key={user.id}&gt;{user.username}&lt;/li&gt;
          )}
        &lt;/ul&gt;
      );
    }
  }
  
  const mapStateToProps = state =&gt; ({
    user: state.user,
  
  });
  
  export default connect(mapStateToProps)(UserDetailView);
  </code></pre>
  
  <p>Index.js</p>
  
  <pre><code>import React from 'react';
  import ReactDOM from 'react-dom';
  import App from './App';
  import registerServiceWorker from './registerServiceWorker';
  import { createStore, compose, applyMiddleware } from 'redux';
  import { Provider } from 'react-redux';
  import thunk from 'redux-thunk';
  
  import reducer from './store/reducers/auth';
  
  
  const composeEnhances = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
  
  const store  = createStore(reducer, composeEnhances(
      applyMiddleware(thunk)
  ))
  
  const app = (
      &lt;Provider store={store}&gt;
          &lt;App /&gt;
      &lt;/Provider&gt;
  
  )
  
  ReactDOM.render(app, document.getElementById('root'));
  registerServiceWorker();
  </code></pre>
  
  <p>Anyone got any ideas why this isn't working?</p>