Использование приставки с реакцией, почему выборка новых данных удаляет часть моего предыдущего состояния?

Question

У меня несколько запросов, возникающих один за другим, я обрабатываю их с помощью действий и редукторов, но некоторые из них, по-видимому, удаляют элементы моего состояния по завершении.

Может кто-нибудь объяснить мне, почему это так?

Вот мой редуктор:

...
    case FETCH_BLOG:
      return { ...state, blogs: action.payload.data };
    case FETCH_ITEM_LIST:
      return { ...state.item, done: true, popular: [ ...state.popular ], nearby: [ ...state.nearby ], item: { ...state.item }, second_item: { ...state.second_item }, items: action.payload.data.item , new_item: action.payload.data.new_item, item_places: action.payload.data.item_places, stories: action.payload.data.stories };
    case FETCH_ITEM_NEARBY:
      return { ...state, nearby: action.payload.data.nearby, loading: false, count: action.payload.data.count, done: true };
    case FETCH_ITEM_NEARBY_START:
      return { ...state, loading: true };
    case FETCH_ITEM_POPULAR:
      return { ...state, popular: action.payload.data.popular };
...

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

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

    this.props.itemNearbyFetch();
    this.props.itemPopularFetch();
    this.props.itemListFetch();
    this.props.blogFetch();

Answer 1

в вашем действии FETCH_ITEM_LIST вы только распространяете элемент в состояние, которое избавит от любых атрибутов объекта состояния и заменит любые атрибуты, которые есть у вашего item. Я думаю, вы неправильно понимаете, как работает оператор спреда.

То, что вы хотите сделать, это что-то вроде

case FETCH_ITEM_LIST:
  return { ...state, 
       done: true, 
       items: action.payload.data.items, 
       new_item: action.payload.data.new_item, 
       item_places: action.payload.data.item_places, 
       stories: action.payload.data.stories 
  };

В предыдущем примере у вас теперь было бы все, что было ранее в состоянии, например popular и nearby, которые будут скопированы, stories, items, and item_places из данных полезной нагрузки возвращаются в новое состояние.

выполнение item:{...state.item} является избыточным, так как обрабатывается, когда вы делаете {...state, ...}