Async actions in Zustand

import { useEffect } from 'react'
import { create } from 'zustand'

const wait = (ms) => new Promise((resolve) => setTimeout(resolve, ms))

const useFishStore = create((set, get) => ({
  fishies: [],
  status: 'idle',
  loads: 0,
  // An async action: call set whenever the data is ready
  loadFishies: async () => {
    set({ status: 'loading' })
    await wait(1200) // stand-in for a slow request
    const loads = get().loads + 1 // read current state with get()
    set({ fishies: ['salmon', 'tuna', 'trout'].map((f) => `${f} (load ${loads})`), status: 'done', loads })
  },
}))

const colors = { idle: '#9aa0ad', loading: '#f5b84a', done: '#5fd38d' }

export default function App() {
  const fishies = useFishStore((state) => state.fishies)
  const status = useFishStore((state) => state.status)
  const loadFishies = useFishStore((state) => state.loadFishies)

  useEffect(() => { loadFishies() }, [loadFishies])

  return (
    <div style={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center', background: '#111', fontFamily: 'system-ui, sans-serif' }}>
      <div style={{ background: '#1c1f26', color: '#e8eaf0', padding: 26, borderRadius: 14, width: 400, boxSizing: 'border-box' }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
          <h2 style={{ margin: 0, fontSize: 20 }}>Fish market</h2>
          <span style={{ color: colors[status], fontWeight: 700, fontSize: 13 }}>{status}</span>
        </div>
        <ul style={{ minHeight: 90, paddingLeft: 20, lineHeight: 1.7 }}>
          {status === 'loading' ? <li style={{ color: '#9aa0ad' }}>loading...</li> : fishies.map((f) => <li key={f}>{f}</li>)}
        </ul>
        <button
          onClick={loadFishies}
          disabled={status === 'loading'}
          style={{ padding: '9px 16px', border: 0, borderRadius: 8, background: '#f5b84a', color: '#1a1a1a', fontWeight: 600, cursor: 'pointer', opacity: status === 'loading' ? 0.5 : 1 }}
        >
          Reload
        </button>
      </div>
    </div>
  )
}