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

Question

我是 Redux Persist 的新手，我正在尝试将商品保存在我的购物车中。据我了解，我认为我正确地导出了我的商店，因为一切运行顺利，直到我将一个项目添加到我的购物车中，这就是我收到错误消息的时候。非常感谢任何输入，提前致谢。

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);

坚持Store.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')
  );

此外，这是错误提示来自的页面

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 在存储数据之前持久化数据。它使用 JSON.stringify 和 JSON.parse 将其转换为字符串并再次转换回来。当您将 state.client.checkout.addLineItems 转换为字符串时会发生什么？它消失了。

Non-serializable 函数等数据不应存储在 redux 状态中。相反，您应该存储原始数据，然后您可以使用这些数据在应用程序中创建 Client 实例。

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

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

reactjs

redux

react-redux

redux-persist