How to handle the loading status of each asynchronous action

[felix9ia]

fetchItems，addItem，updateItem，removeItem，
I want to rely on the loading state of these actions on the respective nodes in the page. Obviously, each node cannot use the only global loading state in the store, but each node needs its own loading state.

Are there any best practices related to this?

import create from 'zustand'

type Item = {
  id: number
  name: string
}

type Store = {
  items: Item[]
  loading: boolean

  fetchItems: () => Promise<void>

  addItem: (item: Omit<Item, 'id'>) => Promise<void>

  updateItem: (id: number, newName: string) => Promise<void>

  removeItem: (id: number) => Promise<void>
}

export const useStore = create<Store>((set, get) => ({
  items: [],
  loading: false,
  fetchItems: async () => {
    set({ loading: true })
    try {
      const response = await fetch('/api/items')
      if (!response.ok) throw new Error('网络请求失败')
      const data: Item[] = await response.json()
      set({ items: data })
    } catch (error) {
      console.error('获取项目失败：', error)
    } finally {
      set({ loading: false })
    }
  },
  addItem: async (item) => {
    set({ loading: true })
    try {
      const response = await fetch('/api/items', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify(item)
      })
      if (!response.ok) throw new Error('添加项目失败')
      const newItem: Item = await response.json()
      set(state => ({ items: [...state.items, newItem] }))
    } catch (error) {
      console.error('添加项目错误：', error)
    } finally {
      set({ loading: false })
    }
  },
  updateItem: async (id, newName) => {
    set({ loading: true })
    try {
      const response = await fetch(`/api/items/${id}`, {
        method: 'PUT',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ name: newName })
      })
      if (!response.ok) throw new Error('更新项目失败')
      const updatedItem: Item = await response.json()
      set(state => ({
        items: state.items.map(item =>
          item.id === id ? updatedItem : item
        )
      }))
    } catch (error) {
      console.error('更新项目错误：', error)
    } finally {
      set({ loading: false })
    }
  },
  removeItem: async (id) => {
    set({ loading: true })
    try {
      const response = await fetch(`/api/items/${id}`, {
        method: 'DELETE'
      })
      if (!response.ok) throw new Error('删除项目失败')
      set(state => ({
        items: state.items.filter(item => item.id !== id)
      }))
    } catch (error) {
      console.error('删除项目错误：', error)
    } finally {
      set({ loading: false })
    }
  }
}))