reactjs/redux

import { createSlice, createAsyncThunk } from '@reduxjs/toolkit'

export const getProducts = createAsyncThunk('products/getFruits', async () => {
    const url = 'MY API URL'
    const response = await fetch(url)
    const data = await response.json()
    return data
})

export const initialState = {
    fruits: [],
    isLoading: false,
}

export const storeState = createSlice({
    name: 'products',
    initialState,
    extraReducers: (builder) => {
        builder
            .addCase(getProducts.pending, (state) => {
                state.isLoading = true
            })
            .addCase(getProducts.fulfilled, (state, action) => {
                state.fruits.push(action.payload)
                state.isLoading = false
            })
            .addCase(getProducts.rejected, (state) => {
                state.isLoading = false
            })
            .addDefaultCase((state, action) => {})
    },
})

export default storeState.reducer