redux persist not storing line items(cart element) data on refresh - reactjs

Question

I am find problem in persisting data when page is refreshed. I've a file with reducer and actions. I'm using shopify-js-buy sdk for cart of my project. The cart works fine if there is not page refresh but when there is a page refresh cart item data is not persisting. I feel that if I use only open/close state is persisted but other data like subtotal , items, no.of items etc. are not persisting.
this is reducer and action file:
import { useSelector, useDispatch } from "react-redux"
import Client from "shopify-buy"
// Creates the client with Shopify-Buy and store info
//Example Storefront
const client = Client.buildClient({
storefrontAccessToken: "dd4d4dc146542ba7763305d71d1b3d38",
domain: "graphql.myshopify.com",
})
const PRODUCTS_FOUND = "shopify/PRODUCTS_FOUND"
const PRODUCT_FOUND = "shopify/PRODUCT_FOUND"
const COLLECTION_FOUND = "shopify/COLLECTION_FOUND"
const CHECKOUT_FOUND = "shopify/CHECKOUT_FOUND"
const SHOP_FOUND = "shopify/SHOP_FOUND"
const ADD_VARIANT_TO_CART = "shopify/ADD_VARIANT_TO_CART"
const UPDATE_QUANTITY_IN_CART = "shopify/UPDATE_QUANTITY_IN_CART"
const REMOVE_LINE_ITEM_IN_CART = "shopify/REMOVE_LINE_ITEM_IN_CART"
const OPEN_CART = "shopify/OPEN_CART"
const CLOSE_CART = "shopify/CLOSE_CART"
const CART_COUNT = "shopify/CART_COUNT"
const initialState = {
isCartOpen: false,
cartCount: 0,
checkout: {},
products: [],
featured: [],
product: {},
shop: {},
}
export default (state = initialState, action) => {
switch (action.type) {
case PRODUCTS_FOUND:
return { ...state, products: action.payload }
case PRODUCT_FOUND:
return { ...state, product: action.payload }
case COLLECTION_FOUND:
return { ...state, featured: action.payload }
case CHECKOUT_FOUND:
return { ...state, checkout: action.payload }
case SHOP_FOUND:
return { ...state, shop: action.payload }
case ADD_VARIANT_TO_CART:
return { ...state, checkout: action.payload }
case UPDATE_QUANTITY_IN_CART:
return { ...state, checkout: action.payload }
case REMOVE_LINE_ITEM_IN_CART:
return { ...state, checkout: action.payload }
case OPEN_CART:
return { ...state, isCartOpen: true }
case CLOSE_CART:
return { ...state, isCartOpen: false }
case CART_COUNT:
return { ...state, cartCount: action.payload }
default:
return state
}
}
// Gets all the products from Shopify
export function getProducts() {
return (dispatch) => {
client.product.fetchAll().then((resp) => {
dispatch({
type: PRODUCTS_FOUND,
payload: resp,
})
})
}
}
// Gets individual item based on id
export function getProduct(id) {
return async (dispatch) => {
const resp = await client.product.fetch(id)
dispatch({
type: PRODUCT_FOUND,
payload: resp,
})
return resp
}
}
// Creates initial checkout state from Shopify
export function checkout() {
return (dispatch) => {
client.checkout.create().then((resp) => {
dispatch({
type: CHECKOUT_FOUND,
payload: resp,
})
})
}
}
// Gets Shopify store information
export function shopInfo() {
return (dispatch) => {
client.shop.fetchInfo().then((resp) => {
dispatch({
type: SHOP_FOUND,
payload: resp,
})
})
}
}
// Adds variants to cart/checkout
export function addVariantToCart(checkoutId, lineItemsToAdd) {
return async (dispatch) => {
const response = await client.checkout.addLineItems(
checkoutId,
lineItemsToAdd
)
dispatch({
type: ADD_VARIANT_TO_CART,
payload: response,
})
return response
}
}
// Updates quantity of line items in cart and in checkout state
export function updateQuantityInCart(lineItemId, quantity, checkoutId) {
const lineItemsToUpdate = [
{ id: lineItemId, quantity: parseInt(quantity, 10) },
]
return async (dispatch) => {
const resp = await client.checkout.updateLineItems(
checkoutId,
lineItemsToUpdate
)
dispatch({
type: UPDATE_QUANTITY_IN_CART,
payload: resp,
})
return resp
}
}
// Removes line item from cart and checkout state
export function removeLineItemInCart(checkoutId, lineItemId) {
return (dispatch) => {
client.checkout.removeLineItems(checkoutId, [lineItemId]).then((resp) => {
dispatch({
type: REMOVE_LINE_ITEM_IN_CART,
payload: resp,
})
})
}
}
// To close the cart
export function handleCartClose() {
return {
type: CLOSE_CART,
}
}
// To open the cart
export function handleCartOpen() {
return {
type: OPEN_CART,
}
}
// Set the count of items in the cart
export function handleSetCount(count) {
return {
type: CART_COUNT,
payload: count,
}
}
// this is exporting reducer file as shopifyState
export { default as shopifyState } from "./Shopify" //this written in another file.
//this store.js
//===================================================================================
import { createStore, combineReducers, applyMiddleware, compose } from "redux"
import thunk from "redux-thunk";
import * as reducers from "../ReduxStore/ShopifyCart";
import { persistStore, persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';
import autoMergeLevel2 from 'redux-persist/lib/stateReconciler/autoMergeLevel2';
const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose
const rootReducer = combineReducers(reducers)
const enhancer = composeEnhancers(applyMiddleware(thunk))
const persistConfig = {
key: 'root',
storage,
stateReconciler: autoMergeLevel2,
}
const persistedReducer = persistReducer(persistConfig, rootReducer)
export const Store = createStore(persistedReducer, undefined, enhancer)
export const PersistStore = persistStore(Store);
//this is index.js
ReactDOM.render(
<BrowserRouter>
<Provider store={Store}>
<PersistGate loading={null} persistor={PersistStore}>
<React.StrictMode>
<App />
</React.StrictMode>
</PersistGate>
</Provider>
</BrowserRouter>,
document.getElementById('root')
);
//this file contains code for showing specific product based on input from another file
import React, { useEffect, useState } from "react"
import { useDispatch, useSelector } from 'react-redux';
import { Link } from "react-router-dom"
// import { useShopify } from "../../../../hooks"
import {addVariantToCart,getProduct,handleCartOpen} from '../../../../ReduxStore/ShopifyCart/Shopify'
export default (props) => {
const dispatch = useDispatch()
const checkoutState = useSelector(
(state) => state.shopifyState.checkout
)
const product = useSelector(
(state)=>(state.shopifyState.product)
)
const id = props.match.params.productId
const defaultSize = product.variants && product.variants[0].id.toString()
const [size, setSize] = useState("")
const [quantity, setQuantity] = useState(1)
const description = product.description && product.description.split(".")
function changeSize(sizeId, quantity) {
dispatch(handleCartOpen())
if (sizeId === "") {
sizeId = defaultSize
const lineItemsToAdd = [
{ variantId: sizeId, quantity: parseInt(quantity, 10) },
]
const checkoutId = checkoutState.id
// addVariant(checkoutId, lineItemsToAdd)
dispatch(addVariantToCart(checkoutId, lineItemsToAdd))
} else {
const lineItemsToAdd = [
{ variantId: sizeId, quantity: parseInt(quantity, 10) },
]
const checkoutId = checkoutState.id
// addVariant(checkoutId, lineItemsToAdd)
dispatch(addVariantToCart(checkoutId, lineItemsToAdd))
}
}
useEffect(() => {
(dispatch(getProduct(id)))
}, [id])
return (
<div id="individualProduct">
<Link className="homeButton button" to={"/Home"}>
Home
</Link>
<div className="Product-wrapper2">
<div className="Images">
{product.images &&
product.images.map((image, i) => {
return (
<img
key={image.id + i}
src={image.src}
alt={`${product.title} product shot`}
/>
)
})}
</div>
<div className="Product__info">
<h2 className="Product__title2">{product.title}</h2>
<ul className="Product__description">
{description &&
description.map((each, i) => {
return <li key={`line-description +${i}`}>{each}</li>
})}
</ul>
<div>
<label htmlFor={"prodOptions"}>Size</label>
<select
id="prodOptions"
name={size}
onChange={(e) => {
setSize(e.target.value)
}}
>
{product.variants &&
product.variants.map((item, i) => {
return (
<option
value={item.id.toString()}
key={item.title + i}
>{`${item.title}`}</option>
)
})}
</select>
</div>
<div>
<label>Quantity</label>
<input
className="quantity"
type="number"
min={1}
value={quantity}
onChange={(e) => {
setQuantity(e.target.value)
}}
></input>
</div>
<h3 className="Product__price">
${product.variants && product.variants[0].price}
</h3>
<button
className="prodBuy button"
onClick={(e) => changeSize(size, quantity)}
>
Add to Cart
</button>
</div>
</div>
</div>
)
}
//this is cart code
import React, { useEffect } from "react"
import LineItem from "../LineItem/LineItem"
// import { useShopify } from "../../../../hooks"
import { useSelector, useDispatch } from "react-redux"
import {handleCartOpen,handleCartClose,handleSetCount} from '../../../../ReduxStore/ShopifyCart/Shopify'
// import { MdShoppingCart, MdRemoveShoppingCart } from "react-icons/md"
export default (props) => {
const cartStatus = useSelector((appState) => appState.shopifyState.isCartOpen)
const checkoutState = useSelector(
(appState) => appState.shopifyState.checkout
)
const dispatch = useDispatch()
function handleOpen(e) {
e.preventDefault()
dispatch(handleCartOpen())
}
function handleClose(e) {
e.preventDefault()
dispatch(handleCartClose())
}
function openCheckout(e) {
e.preventDefault()
// window.open(checkoutState.webUrl) // opens checkout in a new window
window.location.replace(checkoutState.webUrl) // opens checkout in same window
}
useEffect(() => {
const button = document.querySelector("button.App__view-cart")
if (cartStatus === true) {
button.classList.add("hide")
} else {
button.classList.remove("hide")
}
function getCount() {
let lineItems =
checkoutState.lineItems && checkoutState.lineItems.length > 0
? checkoutState.lineItems
: []
let count = 0
lineItems.forEach((item) => {
count += item.quantity
return count
})
dispatch(handleSetCount(count))
}
getCount()
}, [cartStatus, checkoutState])
return (
<div id="cart">
<div className={`Cart ${cartStatus ? "Cart--open" : ""}`}>
<div className="App__view-cart-wrapper2">
<button className="App__view-cart" onClick={(e) => handleOpen(e)}>
{/* <MdShoppingCart /> */}
</button>
</div>
<header className="Cart__header">
<h2>Your cart</h2>
<button className="Cart__close" onClick={(e) => handleClose(e)}>
{/* <MdRemoveShoppingCart /> */}
<span style={{fontSize: '30px'}}>X</span>
</button>
</header>
<ul className="Cart__line-items">
<LineItem />
</ul>
<footer className="Cart__footer">
<div className="Cart-info clearfix">
<div className="Cart-info__total Cart-info__small">Subtotal</div>
<div className="Cart-info__pricing">
<span className="pricing">$ {checkoutState.subtotalPrice}</span>
</div>
</div>
<div className="Cart-info clearfix">
<div className="Cart-info__total Cart-info__small">Taxes</div>
<div className="Cart-info__pricing">
<span className="pricing">$ {checkoutState.totalTax}</span>
</div>
</div>
<div className="Cart-info clearfix">
<div className="Cart-info__total Cart-info__small">Total</div>
<div className="Cart-info__pricing">
<span className="pricing">$ {checkoutState.totalPrice}</span>
</div>
</div>
<button
className="Cart__checkout button"
onClick={(e) => openCheckout(e)}
>
Checkout
</button>
</footer>
</div>
</div>
)
}
I'm working on reactJs. Will be thankfull for any help on this .