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