类型错误:state.client.checkout.addLineItems不是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);

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

Answer 1

Redux持久化在存储数据之前对数据进行序列化。它使用JSON.stringify和JSON.parse将数据转换为字符串，然后再转换回来。当您将state.client.checkout.addLineItems转换为字符串时，它会发生什么？它消失了。

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