Как сохранить состояние реакции даже после обновления!!!

Примечание: ВАМ НУЖНО НЕБОЛЬШОЕ ЗНАНИЕ ИНСТРУМЕНТА REDUX

Иногда мы хотим, чтобы значение состояния сохранялось после обновления браузера. Например, некоторые настройки для конкретного веб-приложения, такие как темный режим или товары в корзине.

Для таких случаев мы можем использовать localstorage. Localstorage — это встроенная память браузера для сохранения подобных настроек.

Давайте рассмотрим пример.

Предположим, у нас есть объект корзины, как показано ниже.

cartItems = {
cartItems: localStorage.getItem('cartItems') ? JSON.parse(localStorage.getItem('cartItems')) : [],
    cartTotalQuantity: 0,
    cartTotalAmount: 0
}
Войти в полноэкранный режим Выход из полноэкранного режима

cartItems : Мы указываем, что нужно получить элементы из локального хранилища по ключу ‘cartItems’, если они существуют, то получить эти элементы или вернуть пустой массив, если корзина пуста.

const cartSlice = createSlice({
    name: 'cart',
    initialState,
    reducers: {
        addToCart(state, action) {
            const itemIndex = state.cartItems.findIndex((item) => item.id === action.payload.id);

            if (itemIndex >= 0) {
                state.cartItems[itemIndex].cartQuanity += 1;
                toast.info(`increased ${state.cartItems[itemIndex].name} cart quantity`, {
                    position: 'bottom-left'
                });
            }
            else {
                const tempProd = { ...action.payload, cartQuanity: 1 };
                state.cartItems.push(tempProd);
                toast.success(`${action.payload.name} Added To The Cart`, {
                    position: 'bottom-left'
                });
            }
            localStorage.setItem('cartItems', JSON.stringify(state.cartItems))
        }
    }
})

Вход в полноэкранный режим Выход из полноэкранного режима

🥔

Оцените статью
devanswers.ru
Добавить комментарий