我正在使用 redux persist 在应用程序启动时自动保留和补充状态,如文档中所述,特别是使用 AsyncStorage:https://github.com/rt2zz/redux-persist .
我在下面定义了一个 reducer,它将当前产品添加到 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,即使它存在于 state.products 中也是如此
最佳答案
我认为问题可能与 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
关于javascript - Redux-persist react native AsyncStorage 对象序列化对象不相等,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41544213/