реагировать и редуцировать данные из axios, недоступные в подпорках

Question

Я пытаюсь разобраться с React & Redux,

Я извлекаю некоторые данные из написанного мной API и пытаюсь отобразить эти данные в одном из моих компонентов.Возвращенные данные - это простой объект JSON, который выглядит следующим образом:

{
"brief": "No brief given",
"tasks": [
    {
        "_id": "5c74ffc257a059094cf8f3c2",
        "task": "XXX Task 7",
        "project": "5c7458abd2fa91567f4e4f03",
        "date_created": "2019-02-26T08:58:42.260Z",
        "__v": 0
    }
],
"_id": "5c7458abd2fa91567f4e4f03",
"owner": {
    "_id": "5c5af553eea087426cd5f9b9",
    "name": "Test test",
    "email": "test@test.com",
    "avatar": "placeholder.jpg",
    "password": "$2a$10$dsGdQZ4APnmAVjbII4vX4u7bCEm0vjxGtHAJ8LijrcBBNTHSn9d5i",
    "created_at": "2019-02-06T14:55:15.321Z",
    "__v": 0
},
"name": "XXX Project 1",
"status": "Pending",
"slug": "XXX-project-1",
"created_at": "2019-02-25T21:05:47.643Z",
"__v": 0

}

Я получаю эти данные с помощью действия в моей функции componentDidMount() в моем компоненте, подобном этому,

       import React, { Component } from "react";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";
import { connect } from "react-redux";
import { getProject } from "../../actions/projectActions";
import Dropdown from "react-dropdown";
import Avatar from "../profile/Avatar";
import ProjectPlaceholder from "../../img/new-project.svg";

import "react-dropdown/style.css";
import "../../css/project.scss";

class Project extends Component {
  constructor() {
    super();
  }

  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.dispatch(getProject(id));
  }

  render() {
    console.log(this.props.project.name)
  }

Project.propTypes = {};

const mapStateToProps = state => ({
  project: state.project.project,
  errors: state.errors
});

export default connect(mapStateToProps)(Project);

Это мое действие,

    import axios from "axios";

import { GET_PROJECT, GET_ERRORS } from "./types";

// Set logged in user
export const getProject = slug => dispatch => {
  axios
    .get(`/api/projects/${slug}`)
    .then(res => {
      console.log(res);
      dispatch({
        type: GET_PROJECT,
        payload: res.data
      });
    })
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

, а вот мой редуктор,

    import { GET_PROJECT } from "../actions/types";

const initialState = {};

export default function(state = initialState, action) {   
    switch (action.type) {
        case GET_PROJECT:
            return {
                ...state,
                project: action.payload
            };
        default:
            return state;   
    } 
}

Итак 1) Я не могу работать, почему в моей функции mapToProps мне нужноиспользование state.project.project, когда все, что возвращается, - это объект JSON, и 2) почему в моем методе рендеринга журналы console.log не определены?

Кто-нибудь может мне помочь, пожалуйста?

Answer 1

1. Я не могу понять, почему в моей функции mapStateToProps мне нужно использовать state.project.project, когда все, что возвращается, это объект JSON

Вы всегданеобходимо получить к нему доступ state.project.project, поскольку состояние - это то, что вводится connect, а project - это ваше имя среза данных в хранилище, поэтому вам нужно указать, какоеэто срез данных , из которого вы хотите извлечь данные, потому что вы использовали combReducers в хранилище.

2. почему в моем методе рендеринга console.log регистрирует undefined .

Это потому, что ваш initialState в вашем редукторе равен {}, и вы заполняете его, используя async вызов в componentDidMount, когда render () получает его, это undefined .

Answer 2

Предполагая, что res.data содержит объект json, который вы указали в своем вопросе, и вы назвали свойство редуктора как project, оно должно содержать свойство project, .ie, код должен работать нормально.Вы можете попробовать зарегистрировать полезную нагрузку в редукторе / действии, чтобы проверить, правильно ли API отправляет данные.Вы также можете установить начальное значение для проекта как {} (пустой объект), чтобы вы не получили state.project.project как undefined при начальном рендеринге.Пожалуйста, проверьте, правильно ли он настроен.

Вы также можете проверить консоль на наличие ошибок, а также использовать промежуточное программное обеспечение redux-logger для регистрации всех отправленных действий - что даст вам представление о том, что происходит внутри приставки.