товар в корзине утерян при refre sh page - PullRequest
Новая
       54

товар в корзине утерян при refre sh page

1 голос
/ 05 августа 2020

Я пытаюсь добавить товар в корзину с помощью response-redux, и всякий раз, когда я обновляю sh страницу, все мои товары исчезают.

Вот мой магазин. js: 

import {
    createStore,
    applyMiddleware
} from 'redux';

import {
    composeWithDevTools
} from 'redux-devtools-extension'
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const initialState = {};
const middleware = [thunk]

const store = createStore(
    rootReducer,
    initialState,
    composeWithDevTools(applyMiddleware(...middleware)),
)

export default store;

и вот мой редуктор: 

import {
    ADD_PRODUCT_BASKET,
    GET_NUMBERS_BASKET,
    LOADING,
    SUCCESS
} from '../actions/type';

const initialState = {
    products: [],
    loading: false,
    basketNumbers: 0,
    cartCost: 0,
    numbers: 0,
    inCart: false
};

export default (state = initialState, action) => {
    switch (action.type) {
        case LOADING:
            return {
                ...state,
                products: [],
                    loading: true,
                    err: ''
            };

        case SUCCESS:
            return {
                ...state,
                products: action.payload,
                    loading: false,
                    err: ''
            };
        case ADD_PRODUCT_BASKET:
            let numbers = (state.numbers += 1);
            let inCart = (state.inCart = true);
            let products = state.products;
            let foundProduct = products.find(prod => prod.title === action.payload.title);

            if (foundProduct) {
                foundProduct.quantity++;
            } else {
                action.payload.quantity = 1;
                products.push(action.payload);
            }
            return {
                ...state,
                basketNumbers: state.basketNumbers + 1,
                    cartCost: state.cartCost + action.payload.price,
                    product: products,
                    numbers: numbers,
                    inCart: inCart
            };
        case GET_NUMBERS_BASKET:
            return {
                ...state
            };
        default:
            return state;
    }
};

как я могу сделать так, чтобы он оставался после обновления sh страницы? Вот ссылка на мой проект на github, если вы хотите просмотреть мой код: https://github.com/nathannewyen/the-beuter

1 Ответ

2 голосов
/ 06 августа 2020

Ключевым моментом здесь является хранение сессий. Довольно просто реализовать с Redux. Вы хотите, чтобы ваше начальное состояние загружало ключ из хранилища сеансов, которое является вашим сериализованным состоянием редукции. Затем подпишитесь на функцию, которая получает состояние вашего хранилища и сохраняет его обратно в этот ключ хранилища сеанса. Я делаю это следующим образом: 

export const loadState = (): object | undefined => {
  try {
    const serializedState = sessionStorage.getItem('state');

    if (serializedState === null) {
      return {};
    }
    return JSON.parse(serializedState);
  } catch (error) {
    return undefined;
  }
};

export const saveState = (state: object): void => {
  console.log(state);
  try {
    const serializedState = JSON.stringify(state);
    sessionStorage.setItem('state', serializedState);
  } catch (error) {
    // Ignore write errors
  }
};

В конфигурации вашего магазина сделайте что-то вроде этого: 

const initialState = loadState();

store.subscribe(() => {
  saveState(store.getState());
});
...