Как обнаружить в чем ошибка загрузки данных с сервера (React/Redux/thunk)?

Question

[evg_96]

Прохожу курс по реакту, дошел до 7/9 урока. Все до этого было более менее нормально. Дошло время до добавления функционала загрузки комментариев для статьи. Повторил все за лектором, но в итоге на каком то этапе что то идет не по плану. В итоге в компонент не передается объект комментария, следовательно, не возможно получить автора и текст комментария из пустого объекта.

Логика такая: есть action, в middleware обрабатывается запрос на сервер (fetch), возвращается response.json(). В reducers (comment.js) обрабатывается "LOAD_ARTICLE_COMMENTS_SUCCESS" (используется immutable.js). Возвращается

commentsState.mergeIn(['entities'], arrToMap(action.response, CommentRecord));

. В CommentList вызывается AC loadArticleComments(). В Comment через selector запрашивается комментарий (commentSelector()). В селекторе по id возвращается коммент.

В итоге на каком то шаге что то где то идет не так как запланировано. Вроде бы все как у лектора написал, 100 раз перепроверил, но в итоге ошибка...

Подскажите пожалуйста в чем может быть проблема. Понимаю что это как искать иголку в стоге сена, но вдруг кто то сможет что то подсказать.

сервер в папке simple_api. Запрос комментариев по

url: http://localhost:3000/api/comment?article={articleId}

Для запуска проекта:
1. npm start
2. /simple_api node server.js

Google drive ссылка на проект

Comments

[Антон Спирин]

Сомневаюсь, что кто-то будет качать ваш проект.
Попробуйте выявить ошибку добавив на каждом этапе console.log. Везде в AC с асинхронным вызовом, в редьюсер и в компонент. Подпишитесь на обновления state и выводите результаты в консоль. И посмотрите доходит ли запрос до вашего сервера во вкладке network.

[evg_96]

Антон Спирин, По сути комментарии для статьи загружаются, но почему то, если я не ошибаюсь, у меня получается что комментарий берется до того как произойдет загрузка комментариев в state.
Вывод логов в консоль такой что сначала выводится action, потом получается комментарий из состояния и потом только почему то вызывается console.log из reducer.
В чем может быть дело не подскажите? Не знаю даже в какую сторону копать.

[Антон Спирин]

evg_96, вы, видимо, чистите state до ответа, это провоцирует обновление компонента и достаете селектором undefined. Или же, не используете initial state. Что-то у вас в логике напутано. Сбросьте код, компонента, код родителя, selector, reducer, action creators.
Только используйте тег code, выберите javascript. Три точки на панели форматирования.

[evg_96]

Надеюсь что то прояснится, а то уже не знаю что и делать. Не могу дальше двигаться по курсу без этих комментариев...

Компонент Comment:

import React from "react";
import { connect } from "react-redux";

import { commentSelectorFactory } from "../selectors";

const Comment = ({ comment }) => (
  <div>
    <h5>{ comment.user }</h5>
    { comment.text }
  </div>
);

export default connect(
  () => {
    const commentSelector = commentSelectorFactory();

    return (state, ownProps) => {
      return {
        comment: commentSelector(state, ownProps) // Запрос комментария из селектора
      };
    };
  }
)(Comment);

Код селектора:

export const commentSelectorFactory = () => createSelector(commentsGetter, idGetter, (comments, id) => {
  return comments.getIn(["entities", id]); // Получить комментарий по id
});

Код reducer:

import { arrToMap } from "../helpers";
import { OrderedMap, Record } from "immutable";

const CommentRecord = Record({
  id: null,
  text: "",
  user: ""
});

const ReducerState = Record({
  entities: new OrderedMap({})
});

const defaultState = new ReducerState();

export default (commentsState = defaultState, action) => {
  switch (action.type) {
    case "ADD_COMMENT": {
      return commentsState.setIn(["entities", action.randomId], new CommentRecord({ ...action.payload.comment, id: action.ramdomId }));
    }

    case "LOAD_ARTICLE_COMMENTS_SUCCESS": { // В middleware добавляется _SUCCESS
      return commentsState.mergeIn(['entities'], arrToMap(action.response, CommentRecord));
    }

    default: {
      return commentsState;
    }
  }
};

Код arrToMap():

import { OrderedMap } from "immutable";

export function arrToMap(arr, RecordModel) {
    return arr.reduce((acc, el) => acc.set(el.id, RecordModel ? new RecordModel(el) : el), new OrderedMap({}))
}

Код Action Creator:

export function loadArticleComments(articleId) {
    console.log("Action creator loadArticleComments: ");

    return {
        type: "LOAD_ARTICLE_COMMENTS",
        payload: { articleId },
        callAPI: `/api/comment?article=${articleId}`
    }
}

Код middleware для загрузки данных с сервера:

export default store => next => action => {
  const { callAPI, type, ...rest } = action;

  if (!callAPI) {
    return next(action);
  }

  next({
    ...rest,
    type: type + "_START"
  });

  fetch(callAPI)
    .then(res => res.json())
    .then(response => next({
      ...rest,
      type: type + "_SUCCESS",
      response
    })
  );
};

[Антон Спирин]

evg_96, сбросьте еще компонент родитель в котором Comment рендерится

[evg_96]

Антон Спирин,

import React from "react";
import { connect } from "react-redux";

import { loadArticleComments } from "../AC";

import "./CommentList.css";

import Comment from "./Comment";
import CommentForm from "./CommentForm";

import toggleOpen from "../decorators/toggleOpen";

class CommentList extends React.Component {
  componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
      if (!this.props.isOpen && isOpen && !article.commentsLoading && !article.commentsLoaded) {
          loadArticleComments(article.id)
      }
  }

  getCommentsBody = () => {
    const { article: { comments = [], id } } = this.props;

    if (!comments) {
      return (
        <div>
          <div>empty</div>
          <CommentForm articleId = { id } />
        </div>
      );
    }

    return (
      <div className="comment-list">
        <ul className="list-group">
          {
            comments.map(id => (
              <li className="list-group-item" key = { id }>
                <Comment id = { id } /> // Рендер комментария
              </li>
            ))
          }
        </ul>
        <CommentForm articleId = { id } />
      </div>
    );
  }

  render() {
    return (
      <div>
        <button className="btn btn-dark" onClick = { this.props.handleToggle }>{ this.props.isOpen ? "close comments" : "open comments" }</button>
        { this.props.isOpen && this.getCommentsBody() }
      </div>
    );
  }
}

export default connect(null, {
  loadArticleComments
})(toggleOpen(CommentList));

[Антон Спирин]

evg_96, я на тренировку побежал, как вернусь - помогу вам!

[evg_96]

Антон Спирин, хорошо, буду ждать. удачной тренировки

Answer 1

[Антон Спирин]

Итак, у вас отсутствуют условия инициации загрузки комментариев в CommentsList:

componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
      loadArticleComments(article.id)
  }

каждый раз когда компонент получает новые свойства он вызывает componentWillReceiveProps. С правильно настроенными параметрами в redux он это делать будет вечно. Исправить можно так:

componentWillReceiveProps({ isOpen, article, loadArticleComments }) {
      if (
           !article.commentsLoaded &&
           !article.commentsLoading &&
           !this.props.isOpen &&
           isOpen
         ) {
            loadArticleComments(article.id)
      }
  }

Расшифровывается так: если комментарии не загруженны и еще не загружаются и если список был закрыт и открылся, то можно загрузить комментарии. Как только они будут загруженны, проверка условий будет вылетать на первом шаге.

В редюсере не помню что было но надо так:

case "LOAD_ARTICLE_COMMENTS_SUCCESS": {
      return articleState
        .setIn(["entities", action.payload.articleId, "commentsLoading"], false)
        .setIn(["entities", action.payload.articleId, "commentsLoaded"], true);
    }

По окончанию загрузки комментариев, ставим статье статусы, что комментарии загружены.

Ну и осталось восстановить рендер в содержимого комментария в Comment и все будет работать:

return (
    <div>
      <h5>{comment.user}</h5>
      {comment.text}
    </div>
  );