redux-presist 不更新本地存储

Question

我有一个篮子减速器，里面装着我的购物篮，篮子里的东西是这样的：

basket: {
    32012: {
        title: "foo",
        count: 1
    },
    32013: {
        title: "bar",
        count: 1
    }
}

我用 redux-persist 坚持它，当一个新的 object 被添加或从篮子数组中删除时它工作得很好，但是当我像这样更新 child 时：

basket: {
    32012: {
        title: "foo",
        count: 4
    },
    32013: {
        title: "bar",
        count: 5
    }
}

刷新页面后，每项计数为 1！

这是我的 rootReducer：

import {combineReducers} from 'redux';
import {persistReducer} from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import basketReducer from '../ducks/basket/reducers';
const basketPersistConfig = {
    key: 'basket',
    storage: storage,
};
const rootReducer = combineReducers({
    basket: persistReducer(basketPersistConfig, basketReducer)
});
export default rootReducer;

Answer 1

由于您的 basket reducer 具有嵌套属性，可能是 redux-persist 在水合时没有正确合并对象。

在您的 rootReducer 中尝试添加：

//...previous code
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
const basketPersistConfig = {
  key: 'basket',
  storage: storage,
  stateReconciler: autoMergeLevel2
};

Answer 2

所以这个问题的原因是当我们只更新一个对象的一部分时，持久化不会更新本地存储，所以我应该更新整个对象而不是计数属性。所以我改变了我的 basket reducer 的结构，并将计数和产品彼此分离到两个不同的子 reducer 中，分别称为产品和徽章，并通过密钥将产品计数映射到徽章中的产品

basket: {
    badges: {
        3201: 3.
        3202: 4
    },
    products: {
        3201: {
            id: 3201,
            title: "foo"
        }
        3202: {
            id: 3202,
            title: "bar"
        }
    }
}

Answer 3

//State shape
{
   'A':{},
   'B':{}
}

在我的例子中，诀窍在于 const newState = Object.assign({},state);

switch(action.type){
        case DELETE_CODE:
            const newState = Object.assign({},state);
            delete newState[action.payload.code];
            return newState;
...
...

redux-presist 不更新本地存储

redux-presist not updating local storage

reactjs

redux

redux-persist