Proposal for Enhanced Async Support in Zustand

[jiji-hoon96]

I'm writing to initiate a discussion about enhancing Zustand's capabilities for handling asynchronous actions, particularly for projects that don't require a full-fledged server state management library.

Zustand is highly regarded for its simplicity and flexibility in managing client-side state. However, I've noticed that it doesn't provide built-in support for handling complex asynchronous operations, which are common in many web applications. While libraries like React Query excel at managing server state, there's an opportunity for Zustand to offer a lightweight solution for projects that don't need such extensive features.

Proposal

I've developed a utility called createAsyncSlice, inspired by Redux Toolkit's createAsyncThunk. This utility provides a standardized way to handle loading, success, and error states for async actions within Zustand stores. Here are the key points

1. Simplified Async State Management: createAsyncSlice offers an easy-to-use API for managing async operations, including automatic handling of loading, success, and error states.
2. Lightweight Solution: By incorporating this utility, Zustand could offer a complete state management solution (both client and simple server state) without significantly increasing its bundle size.
3. Optional Usage: It would be an opt-in feature, not affecting existing Zustand usage patterns.

The implementation maintains Zustand's core principles of simplicity and flexibility.

I'd love to hear your thoughts on this proposal.
I look forward to your feedback and the possibility of contributing to Zustand's growth.

Code

import type { StateCreator } from 'zustand/vanilla'

type Status = 'idle' | 'loading' | 'succeeded' | 'failed'

interface AsyncState<Data, Error> {
  data: Data | null
  error: Error | null
  status: Status
}

type AsyncAction<Params> = {
  execute: (params: Params) => Promise<void>
  reset: () => void
}

type AsyncSlice<Params, Data, Error> = AsyncState<Data, Error> &
  AsyncAction<Params>

export const createAsyncSlice =
  <Params, Data, Error>(
    name: string,
    asyncFn: (params: Params) => Promise<Data>,
  ): StateCreator<AsyncSlice<Params, Data, Error>> =>
  (set) => ({
    data: null,
    error: null,
    status: 'idle',
    execute: async (params) => {
      set({ status: 'loading' })
      try {
        const data = await asyncFn(params)
        set({ data, status: 'succeeded', error: null })
      } catch (error) {
        set({ error: error as Error, status: 'failed', data: null })
      }
    },
    reset: () => set({ data: null, error: null, status: 'idle' }),
  })

export const defineAsyncSlice = <Params, Data, Error>(
  name: string,
  asyncFn: (params: Params) => Promise<Data>,
): StateCreator<AsyncSlice<Params, Data, Error>> =>
  createAsyncSlice<Params, Data, Error>(name, asyncFn)

Sample Code

import create from 'zustand'
import { createAsyncSlice } from 'zustand/utils'

interface User {
  id: number
  name: string
}

const fetchUser = async (id: number): Promise<User> => {
  const response = await fetch(`https://api.example.com/users/${id}`)
  if (!response.ok) throw new Error('Failed to fetch user')
  return response.json()
}

const useUserStore = create((set) => ({
  ...createAsyncSlice('user', fetchUser)(set),
}))


function UserProfile() {
  const { status, data: user, error, execute, reset } = useUserStore()

  useEffect(() => {
    execute(1) // Fetch user with ID 1
  }, [])

  if (status === 'loading') return <div>Loading...</div>
  if (status === 'failed') return <div>Error: {error.message}</div>
  if (!user) return null

  return (
    <div>
      <h1>{user.name}</h1>
      <button onClick={() => execute(2)}>Fetch User 2</button>
      <button onClick={reset}>Reset</button>
    </div>
  )
}

💭 To add a few more words, AsyncSlice is available in the react marketplace with prefetch, Suspense, and more

[dai-shi]

Hi, thanks for opening up a new discussion. Let's see how others think.

This is an open field for third-party libraries. So, feel free to create a package on your own. You can list it in docs/integrations/third-party-libraries.md.

I have a question. How do you support having two or more async slices in a store? Or, is it out of the scope?

[dai-shi]

Well, namespacing is hard, it's also another thing that we decided not to have it in the core and open for third-party libs. #2647 might be helpful.

Yeah, hope you could build the concrete solution as a third-party library and see it could be used.

[jiji-hoon96]

We understand what you've communicated.
I'm excited to be able to contribute to the Zustand ecosystem and look forward to seeing how the community embraces and utilizes this solution.
Thank you again for your guidance and openness to community contributions.
Do you have any additional advice or things to consider as we embark on this development?

[dai-shi]

My general advice is developing OSS that would be used by someone is pretty challenging. There are two basic strategies: a) use it by yourself (developer = user), b) find possible users first and hear their requirements before development or at the early stage of development.

[jiji-hoon96]

Understood.

There's something else we'd like to talk about.
I'm a software developer working in South Korea.
I'm planning to give a presentation in Korea in November about zustand and jotai, which you developed as a maintainer.

Korean users are very interested in front-end state management, especially jotai and zustand.
Can we discuss your views on this later?

[dai-shi]

How about joining my Discord server https://discord.gg/MrQdmzd and discussing about it?