Redux добавление объекта в массив не работает только для первой записи

Question

При добавлении объекта в массив с помощью Redux по какой-то причине добавление первой записи не будет работать.

Я получу следующую ошибку:

TypeError: Invalid attempt to spread non-iterable instance. in order to be iterable, non-array objects must have a [Symbolic.iterator]()method.

С этим кодом:

case POST_COMMENTS_ADD:
  return {
    ...state,
    comments: [...state.comments, action.newItem[0]],
    lastKey: null,
    noData: null,
  };

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

Вот как мне удалось его добавить (первая запись без ошибки - все последующие добавления прекрасно работали с исходным кодом)

case POST_COMMENTS_ADD:
  return {
    ...state,
    comments: !state.comments ? [action.newItem[0]] : [...state.comments, action.newItem[0]],
    lastKey: null,
    noData: null,
  };

Исправление работает, но я хотел бы увидеть, в чем я ошибся при первом подходе.

Вот весь мой редуктор:

  import {
    POST_COMMENTS_FETCH_SUCCESS,
    POST_COMMENTS_NO_DATA,
    UNMOUNT_POST_COMMENTS,
    POST_COMMENTS_ADD,
  } from '../actions/types';

  const INITIAL_STATE = {
    comments: [],
  };

  export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
      case POST_COMMENTS_FETCH_SUCCESS:
        return {comments: action.payload, lastKey: action.key, noData: null};
      case POST_COMMENTS_NO_DATA:
        return {comments: null, lastKey: null, noData: true};
      case POST_COMMENTS_ADD:
        return {
          ...state,
          comments: !state.comments ? [action.newItem[0]] : [action.newItem[0], ...state.comments],
          lastKey: null,
          noData: null,
        };
      case UNMOUNT_POST_COMMENTS:
        return {comments: null, noData: null};
      default:
        return state;
    }
  };

Answer 1

Ваш defaultState по умолчанию кажется нормальным, но мы можем видеть, что в нескольких действиях (POST_COMMENTS_NO_DATA и UNMOUNT_POST_COMMENTS) вы устанавливаете комментарии как нулевые. Вместо этого он должен быть установлен как []. Таким образом, даже если состояние инициализируется с комментариями как [], оно позже изменится на null, так как любое из этих действий запускается до POST_COMMENTS_ADD

case POST_COMMENTS_NO_DATA:
        return {comments: [], lastKey: null, noData: true};
  case UNMOUNT_POST_COMMENTS:
        return {comments: [], noData: null};