reactjs - redux-presist 不更新本地存储

Question

我有一个购物篮减速器，其中包含我的购物篮和购物篮内容将是这样的：

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

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

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

所以这个问题的原因是当我们只更新一个对象的一部分时，persist 不会更新本地存储，所以我应该更新整个对象而不是 count 属性。所以我改变了我的购物篮减速器的结构，并将计数和产品彼此分离成两个不同的子减速器，称为产品和徽章，并通过键将产品计数映射到徽章中的产品，如下所示

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

Answer 2

//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;
...
...

Answer 3

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

在您rootReducer尝试添加：

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