代码之家 › 专栏 › 技术社区 › Hugo

使用redux和react,为什么获取新数据会删除我以前状态的一部分?

react-redux redux react-native reactjs

0

Hugo · 技术社区 · 8 年前

我有多个请求一个接一个地发生,我用动作和还原器处理它们,但其中一些似乎在完成时删除了我的状态元素。

有人能解释一下为什么会这样吗?

这是我的减速机:

...
    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();

1 回复 | 直到 8 年前

1

0

Nicholas Claude LeBlanc 8 年前

在你的 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 
  };

在上一个例子中,您现在将拥有以前在state上的任何内容,比如 popular 和 nearby 被复制, stories, items, and item_places 从有效负载返回数据到新状态。

做 item:{...state.item} 是多余的 {...state, ...}