React-Native Persist объект объектов с redux-persist

У меня есть это состояние в редуксе:

draft: {
    temporary: { clientId: null, shoppingCart: [] },
},

в моей корзине я добавляю некоторые объекты с помощью react-addons-update:

const newState = { ...state };
let cart = newState.draft.temporary.shoppingCart;
cart = update(cart, { $push: [{ id: 1, quantity: 3 }] });
newState.draft.temporary.shoppingCart = cart;
return newState;

и мое новое состояние в приложении:

draft: {
        temporary: { clientId: null, shoppingCart: [
            {id: 1, qnt: 3},
        ]},
    },

Я настраиваю редуктор products с помощью:

products: persistReducer(products: {
    key: 'products',
    storage,
    whitelist: ['draft'],   
}, products),

но мой магазин не сохраняется после перезагрузки приложения.

ОБНОВИТЬ:

пример решения, которое работает:

newState.draft = { ...newState.draft, temporary: { ...newState.draft.temporary, shoppingCart: [ ...newState.draft.temporary.shoppingCart, { id: 1, qnt: 3 } ]}};

решение без react-addons-update, которое не работает:

newState.draft.temporary.shoppingCart = [ ...newState.draft.temporary.shoppingCart, { id: payload.id, quantity: 1 } ];

Есть "более чистое решение"??


person Chiara Perino    schedule 28.11.2018    source источник


Ответы (2)


Вот пример, который может работать для вашего случая:

import { persistCombineReducers, persistReducer } from 'redux-persist';

const draftPersistConfig = { key: 'draft', storage: AsyncStorage };

const reducers = { products: persistReducer(draftPersistConfig, products), // ...other reducers if you have any }

const persistConfig = { key: 'root', storage: AsyncStorage, debug: true, whitelist: ['draft'] };

persistCombineReducers(persistConfig, reducers); должен вернуть вам rootReducer, который вы можете использовать для создания хранилища

person ddavydov    schedule 28.11.2018
comment
Спасибо, но это решение не работает для меня. Проблема в том, что об изменении дочернего объекта каким-то образом не сообщается редукционному персистенту. Пример: Это работает -> newState.draft = { ...newState.draft, временно: { ...newState.draft.temporary, shoppingCart: [ ...newState.draft.temporary.shoppingCart, { id: 1, число: 3 } ]}}; Это не работает -› newState.draft.temporary.shoppingCart = [ ...newState.draft.temporary.shoppingCart, { id: payload.id, количество: 1 } ]; Мне нужно найти более чистое решение;) - person Chiara Perino; 29.11.2018
comment
Я добавил пример в основной вопрос :) - person Chiara Perino; 29.11.2018
comment
Я вижу, обновление вложенного состояния может быть сложным, и проблема с примером, который не работает, заключается в том, что вы изменяете состояние вместо того, чтобы создавать новое. Итак, если вы ищете просто более чистый способ обновления состояния избыточности, вот хорошее объяснение stackoverflow.com/questions/35592078/ - person ddavydov; 29.11.2018

Окончательное решение, которое я использовал, заключалось в замене редуктора:

  const newDraft = { ...state.draft };
  let cart = state.draft.temporary.shoppingCart;

  const index = _.findIndex(cart, { id: payload.id });

  if (index === -1) cart = update(cart, { $push: [{ id: payload.id, quantity: 1 }] });
  else cart = update(cart, { [index]: { quantity: { $set: cart[index].quantity + 1 } } });

  newDraft.temporary.shoppingCart = cart;

  return { ...state, draft: { ...newDraft } };
person Chiara Perino    schedule 29.11.2018