How to make createAsyncThunk (Redux Toolkit) return return action as a plain object?

[kkdima]

Hi everyone!
I got lost inside createAsyncThunk logic.
Actually, the logic is pretty simple. I just don't understand why I can't pass updated product quantity to this thunk function, from there pass result inside lifecycle actions and do the rest of the logic in the action.

The Error I receive: Actions must be plain objects. Use custom middleware for async actions.

Here's my createAsyncThunk function:

export const updateLineItem = createAsyncThunk(
	'checkout/updateLineItem',
	async (arg, {rejectWithValue}) => {
		const checkoutId = checkout.id;
		
		const lineItemsToUpdate = [{
			id: arg.item.id,
			quantity: parseInt(arg.quantity, 10)
		}];

		const updatedLineItems = await client.checkout
			.updateLineItems(checkoutId, lineItemsToUpdate)
			.catch((err) => console.log(err));

		return updatedLineItems;
	}
)

The function that gets called from another component with items:

	function decrementQuantity(item) {
		const updatedQuantity = item.quantity - 1
		const arg = {item, updatedQuantity}
		dispatch(updateLineItem(arg));
	}

My checkouSlice looks like this:

const checkoutSlice = createSlice({
    name: 'checkout',
    initialState,
    reducers: {},
    extraReducers: {
		[updateLineItem.fulfilled]: (state, { payload }) => {
			// Updating the line item on the checkout (change the quantity or variant):
			console.log(payload)
			// state.checkout = payload
			// console.log(state.checkout)
			// console.log('line item updated')
		},
	}
})

Please point me in the right direction if you see any flows.
Thank you!

[markerikson]

@kkdima two questions:

• Do you actually have the thunk middleware added to the store? RTK's configureStore does that automatically
• What version of RTK are you using? The latest RTK 1.6 has Redux 4.1, which rewrote that error message to tell you what is reaching the reducer instead of a plain action object.

[kkdima]

1. Inside my store.js I'm using configureStore. This should be sufficient, right?
2. I'm using the latest RTK 1.6 with Redux 4.1

It actually gives me one more error message:

[markerikson]

Can you show how you're using configureStore? Only thing I can figure here is that maybe you're replacing the default middleware. Also, that error message is definitely not from Redux 4.1. Might be worth uninstalling Redux, RTK, and React-Redux, then reinstalling them, just to make sure there's no duplicate versions being installed.

[kkdima]

configureStore looks like this:

import { configureStore } from "@reduxjs/toolkit"
import toggleReducer from './toggleNavigationSlice';
import checkoutReducer from './checkoutSlice';

export default configureStore({
	reducer: {
		toggle: toggleReducer,
		checkout: checkoutReducer,
	}
});

I re-installed Redux and RTK and it still shows the same error.

[markerikson]

This seems very odd. Can you put together a CodeSandbox or a repo that demonstrates this problem happening?