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

雨果

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

有人可以向我解释为什么会这样吗?

这是我的减速器:

...
    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();
尼古拉斯·克劳德·勒布朗

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

在前面的例子,你现在会有什么,以前像状态popularnearby被复制,stories, items, and item_places从有效载荷数据返回到新的状态。

item:{...state.item}是多余的,因为它是在你做的时候处理的{...state, ...}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何使用 redux-persist 仅存储一部分 redux 状态

React 和 redux 使用异步数据获取

如何使用React,Redux和Redux表单刷新状态

React和Redux:使用状态还是引用?

为什么在使用redux和react.js时我的道具会“不确定”?

使用immutable.js进行React和Redux:从列表中删除一项时无法获取正确的状态数据

什么时候使用redux saga和redux thunk?

使用Mongoose和Redux删除记录

使用 REGEX 和 .htacess 删除 URL 的一部分

使用 react 和 redux 修改數量

使用React和Redux的发布方法

使用React-Native和mapStateToProps的Redux

React Redux使用样式和withrouter连接

使用RegularExpression获取IP和端口号的一部分

如何使用cypress和RegEx来获取carrent网址的一部分

使用 React Redux 和 axios 创建获取数据的操作的困难

重构React代码,以使用Firebase RT数据库和Redux Hooks中的Redux状态

Promise 作为 redux 状态的一部分

使用React Native和Redux的动画状态管理

使用 React、Redux 和 Express 从 MongoDB 中删除项目

为什么我的减速器没有收到我的动作?(使用React和Redux)

如何使用React和Redux使用嵌套容器测试组件?

如何使用ReactNative和Redux获取API数据

如何使用 React、Redux 和 Redux-Saga 实现乐观状态更新/推送

我怎样才能进行使用地图和匹配我的代码的一部分?

无法使用React和Redux在组件中显示数据

在使用Redux和redux-thunk的React应用程序中处理加载状态,在一次获取数据后返回组件

组件中仅呈现了一部分更新状态(React / Redux)

使用React和Redux Hooks,为什么我的动作没有触发?

TOP 榜单

热门标签

归档