Реагировать на вызов API Redux, данные не возвращаются в компонент

Question

В последние пару дней я работал над своим вызовом Redux API.На самом деле у меня проблема с получением данных обратно в компонент просмотра.В настоящее время я могу видеть данные в генераторе действий, поэтому я знаю, что, по крайней мере, я могу их получить.Тем не менее, ничего не показывает в представлении.Я предполагаю, что это может иметь отношение к загрузке.Вот почему я пытался загрузить его, когда компонент рендеринга.https://djangoandreact.herokuapp.com/user/1 - это то, что не загружается.

codesandbox: https://codesandbox.io/s/zlor60q3jm?from-embed Должно быть в состоянии перейти к / user / 1 в конце, аналогично переходу к / 1, выводит статью (Твердая надежда)

Вот компонент вида:

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);

Генератор действий

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 }
});

Редукторы (что, вероятно, хорошо):

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

люди.Я нашел его.

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

пользователь должен быть user:action.payload

Кроме того, пользовательское действие должно быть

export const fetchUserSuccess = user => ({

    type: FETCH_USER_SUCCESS,
    payload:  user 
  })

WOOOOW.Но, честно говоря, я так много узнал о Redux за последние две бессонные ночи, что это стоило боли.Действительно было.Теперь, вместо копирования пасты, я знаю, что такое генератор действий и что делает, и редуктор (obvi)