Redux-persist反应本机AsyncStorage对象序列化对象不相等

Question

我正在使用redux持久性来自动持久化并重新补充文档中所述的应用程序启动状态，特别是使用AsyncStorage： https : //github.com/rt2zz/redux-persist 。

我在下面定义了一个减速器，该减速器将当前添加到购物车中的产品保持在state.products

case 'ADD_PRODUCT':
  let addedProducts = [...state.products]
  addedProducts.push(action.product);
  return {
    ...state,
    count: ++state.count,
    products: addedProducts
  };

case 'REMOVE_PRODUCT':
  let count = state.count;
  let removedProducts = [...state.products];
  let idxOfProduct = state.products.indexOf(action.product);
  if(idxOfProduct != -1){
    count = --state.count;
    removedProducts.splice(idxOfProduct,1);
  }

return{
    ...state,
    count: count,
    products: removedProducts
    }; 

＃1 如果我发送“ ADD_PRODUCT”，则添加产品，然后，如果我发送“ REMOVE_PRODUCT”，则按预期方式删除产品。

＃2.1如果我先派ADD_PRODUCT，然后重新加载我的应用程序，则state.products将按预期重新补水，并包含最近添加的产品。

＃2.1。但是，在我重新加载应用后，尝试调用REMOVE_PRODUCT（与我在上面的＃1中调用REMOVE_PRODUCT的方式完全相同）。 即使state.products包含产品state.products.indexOf(action.product); 返回-1，因此不会将其删除。

为什么调用REMOVE_PRODUCT时＃1中的IndexOf方法可以按预期正确工作。 但是，如果我添加一个产品（ADD_PRODUCT）然后重新加载我的应用程序并调用REMOVE_PRODUCT，则即使该状态中存在IndexOf也会返回-1。

Answer 1

我认为问题可能与indexOf处理对象相等性的方式有关。

无需重新加载，就可以添加和删除相同的对象引用，这是可以的。

重新加载时，在state.products加载的引用与action.product的引用不同，因此indexOf无法找到它，并且从不返回索引。

为了解决这个问题，我将使用产品ID在state.products数组中找到该产品，而不是尝试查找整个对象。

为了说明我的回答，这是您正在做的事情：

var a = {obj: 0};
var b = [a];
b.indexOf({obj: 0}); // -1 not found

这是您应该做的：

var a = {id: '26833', obj: 0};
var b = [a];
b.findIndex(function(el){ //findIndex is not supported in IE, find a polyfill for it
   return el.id === '26833'
}); //0

Answer 2

发生这种情况是因为indexOf使用严格的引用相等性检查来查找数组中的元素。 这意味着对象具有相同的字段和值是不够的：它必须是完全相同的对象。 重新加载应用程序后，由于原始对象已被销毁，因此这永远不可能成立。

如果您的产品具有某种唯一ID字段，那么最简单的方法是过滤列表以排除具有匹配ID的商品：

const products = state.products.filter(p => p.id !== action.product.id);
const count = products.length;

return { ...state, products, count };