在 Redux Toolkit 中丢失部分状态答案

【问题标题】：Losing a part of my state in Redux Toolkit在 Redux Toolkit 中丢失部分状态
【发布时间】：2022-01-01 20:43:17
【问题描述】：

我正在尝试存储电子商务项目的购物车状态。这是我第一次使用 Redux Toolkit。在前几张图片中，您可以看到状态设置以及启动时本地存储的外观。

Application part of Chrome after clearing cookies

然后，在使用应用程序一段时间后，我似乎失去了 cart_total、cart_quantity 和 active 状态，只留下了封装所有状态的“母亲”购物车状态。 As you can see, I no longer have the objects from the initialState, only "cart"

这会导致应用程序中断，因为本地存储中不再有 cart.cart 级别，就像开发工具中的第一张图片一样，这会导致我收到未定义的错误。

我确定这是因为我在设置方面可能犯了一个愚蠢的错误。任何帮助将不胜感激！如果有任何不清楚的地方，请告诉我！

最好的问候，拉格桑

【问题讨论】：

请分享代码，不要截图。
但是一般来说，这里有嵌套问题。请在您的configureStore 通话中使用reducer: persistedReducer，否则您最终会得到state.cart.cart 而没有任何必要。
@phry 啊哈！所以这就是我不得不做cart.cart的原因！如果您有时间看一下，这里是回购！ github.com/skaidigitalnorge/okstind/tree/Redux-Toolkit-test
@phry 只是为了添加一些细节。我正在使用购物车项目的所有属性的类接口将购物车项目设置为状态，这给了我“在路径中的操作中检测到不可序列化的值：register。值：[功能：注册]“-错误。这和它有关系吗？
一般来说，你不应该把类放到 Redux 状态。 Redux-persist 无法在没有大量额外工作的情况下恢复它们，并且还会导致其他中间件或 Redux Devtools 浏览器扩展出现问题。

标签： reactjs redux redux-toolkit redux-persist

【解决方案1】：

更新！

我似乎已经解决了这个问题。我发现每次尝试使用 removeFromCart 调度程序时状态都会丢失。我把它改成：

removeFromCart(state, action) {
  const index = state.cart_items.findIndex((item) => item.id === action.payload);
  state.cart_items.splice(index, 1);
},

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

      return state.cart_items.filter((item) => item.id !== action.payload.id);

不管怎样，它成功了！

【讨论】：

您可以改用state.cart_items = state.cart_items.filter((item) => item.id !== action.payload.id); - 但如果您使用return，它将用您返回的内容替换完整状态。