AsyncStorage с хранилищем избыточности

Я использую Redux для управления состоянием корзины, но при перезапуске приложения состояние корзины становится пустым. Чтобы решить эту проблему, я подумал об использовании AsyncStorage для хранения данных и получения их в componentDidMount, но он показывает null вместо данных корзины.

КОД ДЕЙСТВИЯ REDUX

case 'ADD_TO_CART':
       {
           const updatedCart = [...state.cart];
           const item = updatedCart.find(x=>x.key===action.payload.key);
           if(item)
           {
            item.count++;
           }
           else{
             updatedCart.push(action.payload);
           }
           AsyncStorage.setItem('cart',{...state,cart: updatedCart,total: state.total + 1})
            return {
                ...state,
                cart: updatedCart,
                total: state.total + 1,
               
            }
       }

ЗАГРУЗКА ДАННЫХ

async componentDidMount() {
     const item = await AsyncStorage.getItem('cart'))
     console.log(item)
  }

У меня есть еще одно действие для удаления элемента корзины, в котором тот же метод setItem используется для установки состояния корзины.


react-native redux asyncstorage
person Lovepreet Singh    schedule 26.07.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Когда вы устанавливаете объект в асинхронное хранилище, это должна быть строка, а не объект, поэтому используйте JSON.strigify и установите элемент, как показано ниже.

AsyncStorage.setItem('cart',JSON.stringify({...state,cart: updatedCart,total: state.total + 1}));

Когда вы получаете элемент, используйте JSON.parse() для анализа их элемента, как показано ниже.

   const item = await AsyncStorage.getItem('cart'))
     console.log(JSON.parse(item))

Поскольку ваше требование состоит в том, чтобы сохранить состояние редукции, рассмотрите возможность использования https://github.com/rt2zz/redux-persist Который сохранит состояние, когда вы закроете приложение.

person Guruparan Giritharan    schedule 26.07.2020
comment
Спасибо за это. Я только что проверил свою заметку об AsyncStorage, и эта строка и объект были отмечены, но все, что я сделал, это просто установил ее и получил. Я обязательно прочитаю о redux-persist, но скажите мне, что AsyncStorage не может выполнить требование. - person Lovepreet Singh; 26.07.2020
comment
Когда вы используете хранилище Asyn, вам придется сохранять и извлекать каждый тип вручную, скажем, вы хотите добавить элемент в избранное, тогда вам придется поддерживать другой ключ, устанавливать и получать его и обновлять состояние избыточности, но persist делает это для вас и экономит много усилий - person Guruparan Giritharan; 27.07.2020