redux-persist 不更新本地存储答案

【问题标题】：redux-presist not updating local storageredux-persist 不更新本地存储
【发布时间】：2018-08-25 12:50:41
【问题描述】：

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

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;

【问题讨论】：

标签： reactjs redux redux-persist

【解决方案1】：

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

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

【讨论】：

【解决方案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;
...
...

【讨论】：

【解决方案3】：

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

在您的rootReducer 中尝试添加：

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

【讨论】：