redux-presist не обновляет локальное хранилище

У меня есть редуктор корзины, в котором содержится моя корзина, и содержимое корзины будет примерно таким:

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;

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

Поэтому причина этой проблемы в том, что когда мы обновляем только часть объекта, persist не будет обновлять локальное хранилище, поэтому я должен обновить весь объект вместо свойства count. поэтому я изменил структуру своего редуктора корзины и разделил счетчик и продукт друг от друга на два разных субредуктора, называемых продуктами и значками, и сопоставил счетчик продуктов по ключу к продукту в значках, подобных этому

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

Так как ваш basket Редуктор имеет вложенные свойства, возможно, redux-persist неправильно объединяет объекты, когда он увлажняет.

В вашем rootReducer попробуйте добавить:

//...previous code
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2'
const basketPersistConfig = {
  key: 'basket',
  storage: storage,
  stateReconciler: autoMergeLevel2
};
Другие вопросы по тегам