React Redux API call, data not making it back to component

Question

In the last couple of days I have been working on my Redux api call. I am actually having a problem getting the data back to the view component. Currently I'm able to see the data in the in the action generator, so I know at least I'm able to get it. However, nothing is showing in the view. I imagine it may have something to do with when it's loading. This is why I tried to load it when the component is rendering. https://djangoandreact.herokuapp.com/user/1 is what is not loading.

codesandbox: https://codesandbox.io/s/zlor60q3jm?from-embed Should be able to go to /user/1 at the end similar to going to /1 brings up an article(Tough Hope)

Heres the view component:

import React from "react";
import { connect } from "react-redux";
import { fetchUser } from "../store/actions/userActions";

class UserDetailView extends React.Component {
  componentDidMount() {
    const userID = this.props.match.params.userID;
    fetchUser(userID); //fixed
  }
  render() {
    const { user } = this.props.user;
    console.log(user);

    return (
      <div>
        <h3>{user.username}</h3>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  user: state.user
});

const mapDispatchToProps = (dispatch, ownProps) => ({
  fetchUser: dispatch(fetchUser(ownProps.match.params.userID))
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(UserDetailView);

Action generator

import axios from "axios";
import { thunk } from "react-redux";

export function fetchUser(userID) {
  console.log(userID);
  return dispatch => {
    return axios.get(`/api/user/${userID}`).then(res => {
      dispatch(fetchUserSuccess(res.data));
      console.log(res.data); // loads data
    });
  };
}

// Handle HTTP errors since fetch won't.
function handleErrors(response) {
  if (!response.ok) {
    throw Error(response.statusText);
  }
  return response;
}

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 = () => ({
  type: FETCH_USER_BEGIN
});

export const fetchUserSuccess = user => ({
  type: FETCH_USER_SUCCESS,
  payload: { user }
});

export const fetchUserFailure = error => ({
  type: FETCH_USER_FAILURE,
  payload: { error }
});

Reducers(which are probably fine):

import {
  FETCH_USER_BEGIN,
  FETCH_USER_SUCCESS,
  FETCH_USER_FAILURE
} from "../actions/actionTypes";

const initialState = {
  user: {},
  loading: false,
  error: null
};

export default function userReducer(state = initialState, action) {
  switch (action.type) {
    case FETCH_USER_BEGIN:
      return {
        ...state,
        loading: true,
        error: null
      };

    case FETCH_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        user: action.payload.user
      };

    case FETCH_USER_FAILURE:
      return {
        ...state,
        loading: false,
        error: action.payload.error,
        user: {}
      };

    default:
      return state;
  }
}

Answer 1

folks. I found it.

   case FETCH_USER_SUCCESS:
      return {
        ...state,
        loading: false,
        user: action.payload.user
      };

user is supposed to be user:action.payload

Also, the user action was supposed to be

export const fetchUserSuccess = user => ({

    type: FETCH_USER_SUCCESS,
    payload:  user 
  })

WOOOOW. But, honestly, I learned so much about Redux in the last two sleepless nights, it was worth the pain. Really was. Now, instead of copy pasta, I know what an action generator is and does, and reducer (obvi)