Redux Toolkit: How to update state inside reducer after fetching data from the server ?

[kkdima]

Hello everyone.

I have a couple of reducer functions inside my checkoutSlice.js file.
Specifically inside fetchCheckout function I'm trying to fetch data (it's successfully fetching)
and store it in the state as checkout.
But for some reason it gives me this mistake: TypeError: Cannot perform 'get' on a proxy that has been revoked
on this line: .catch((err) => console.log(err));

import {createSlice, createAsyncThunk} from '@reduxjs/toolkit';
import Client from 'shopify-buy';

// Initializing a client to return content in the store's primary language
const client = Client.buildClient({
    storefrontAccessToken: process.env.NEXT_PUBLIC_SHOPIFY_STOREFRONT_ACCESS_TOKEN,
    domain: process.env.NEXT_PUBLIC_SHOPIFY_STORE_DOMAIN,
});

const initialState = {
	checkout: null,
	checkoutID: null,
	isCartOpen: false,
}

const checkoutSlice = createSlice({
	name: 'checkout',
	initialState,
	reducers: {
		createCheckout(state, action) {
        		state.checkout = client.checkout.create();
			localStorage.setItem('checkout', checkout.id);
        	},
		fetchCheckout(state, action) {
			console.log(state)
			console.log(action)
			client.checkout
				.fetch(action.payload)
				.then((checkout) => {
					console.log(checkout.lineItems)
					state.checkout =  checkout;
				})
				.catch((err) => console.log(err));
		}
	}
})

I kinda see the mistake here, I'm probably violating some of these rules:

But I don't know how to implement better decisions here.
Previously I was using Context API for state management and it worked well. Now I want to keep the same logic and keep fetching functions and the state at the same globally accessible place.

Any suggestions, recommendations on how to do it a better way?
Thank you in advance

[markerikson]

Yes, any kind of AJAX request is absolutely a side effect, and you must not do that in a reducer.

I'd recommend reading through these tutorial pages to better understand how to do async logic in a Redux app:

• https://redux.js.org/tutorials/essentials/part-5-async-logic
• https://redux.js.org/tutorials/fundamentals/part-6-async-logic