TypeError：state.client.checkout.addLineItems不是函数Redux Persist

问题描述

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

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

此外，这是错误指出其来自的页面

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

解决方法

Redux在存储数据之前将其序列化。它使用JSON.stringify和JSON.parse将其转换为字符串，然后再次返回。将state.client.checkout.addLineItems转换为字符串会怎样？它消失了。

不可序列化的数据（例如函数）不应以redux状态存储。相反，您应该存储原始数据，然后将其用于在应用程序中创建Client实例。