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, ...}时会被处理

结合使用redux和react，为什么获取新数据会删除以前状态的一部分？

1 个答案: