TypeError: state.client.checkout.addLineItems is not a function Redux Persist

Question

I am new to Redux Persist and I am attempting to persist the items in my cart. From what I understand I think I exported my store correctly because everything runs smoothly until I go to add an item into my cart, thats when I get the error message. Any input is much appreciated, thanks in advance.

Store.js

import reducer from './reducers/Cart'; 
import { persistReducer } from 'redux-persist';
import storage from 'redux-persist/lib/storage';

const persistConfig = {
  key: 'root',
  storage,
}
 
const persistedReducer = persistReducer(persistConfig, reducer)

export default createStore(persistedReducer);

persistStore.js

import store from './Store';

export default persistStore(store);

index.js

import ReactDOM from "react-dom";
import App from "./App";
import { createBrowserHistory } from "history";
import { Router, Route } from "react-router-dom";
import Client from 'shopify-buy';

import { PersistGate } from 'redux-persist/integration/react';
import { Provider } from 'react-redux';
import store from './Store';
import persistor from './persistStore';

import './styles/shopify.css';
import "./styles/index.css";

const client = Client.buildClient({
  storefrontAccessToken: 'a416f71ae0b8cea01da02b110f7af961',
  domain: 'schweiz-foundry.myshopify.com'
});

store.dispatch({type: 'CLIENT_CREATED', payload: client});
// buildClient() is synchronous, so we can call all these after!
client.product.fetchAll().then((res) => {
  store.dispatch({type: 'PRODUCTS_FOUND', payload: res});
});

client.checkout.create().then((res) => {
  store.dispatch({type: 'CHECKOUT_FOUND', payload: res});
});

client.shop.fetchInfo().then((res) => {
  store.dispatch({type: 'SHOP_FOUND', payload: res});
});

const customHistory = createBrowserHistory({
  // basename: config.urlBasename || ""
});


ReactDOM.render(
  <Provider store={store}>
    <PersistGate loading={null} persistor={persistor}>
      <Router history={customHistory}>
        <Route
          component={({ history }) => {
            window.appHistory = history;
            return <App />;
          }}
        />
      </Router>
    </PersistGate>
  </Provider>,
  document.getElementById('root')
  );

Additionally this is the page which the error says it is from

GenericProductPage.js

import Products from '../shopify/Products';
import { connect } from 'react-redux'
import store from '../Store';

class GenericProductsPage extends React.Component {
  constructor() {
    super();
    this.addVariantToCart = this.addVariantToCart.bind(this);
  }
  addVariantToCart(variantId, quantity) {
    const state = store.getState(); // state from redux store
    const lineItemsToAdd = [{variantId, quantity: parseInt(quantity, 10)}]
    const checkoutId = state.checkout.id
    state.client.checkout.addLineItems(checkoutId, lineItemsToAdd).then(res => {
      store.dispatch({type: 'ADD_VARIANT_TO_CART', payload: {isCartOpen: true, checkout: res}});
    });
  }
  render () {
    const state = store.getState(); // state from redux store
    let oProducts = <Products
      products={state.products}
      client={state.client}
      addVariantToCart={this.addVariantToCart}
    />;
    return(
      <div>
        {oProducts}
      </div>
    )
  }
}

export default connect((state) => state)(GenericProductsPage);

Answer 1

Redux persist serializes the data before storing it. It uses JSON.stringify and JSON.parse to convert it to a string and back again. What happens to state.client.checkout.addLineItems when you convert it to a string? It goes away.

Non-serializable data such as functions should not be stored in a redux state. Instead you should store the raw data which you can then use to create a Client instance in the app.