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

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

  •  0
  • Hugo  · 技术社区  · 7 年前

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

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

    这是我的减速机:

    ...
        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 回复  |  直到 7 年前
        1
  •  0
  •   Nicholas Claude LeBlanc    7 年前

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