Asynchronous SetState about zustand

[drcmda]

@Magellol @JeremyRH immer can't (and won't) allow async state, but the store can still be transformed towards immer using middleware. The overhead of set remains, but at least it can mutate, and these sets then can then be async. See: https://codesandbox.io/s/5k77o8lzkn

export const immer = config => (set, get) => config(fn => set(produce(fn)), get)

const [useStore] = create(immer(set => ({
  count: 1,
  inc: async () => {
    await delay(2000)
    set(state => void state.count++)
  },
  dec: () => set(state => void state.count--)
})))

The twitter discussion where this came up: https://twitter.com/0xca0a/status/1116390665607421952

[JeremyRH]

Hi, thanks for the feedback!

So the problem is the immer draft is stale by the time you mutate it. Even if zustand resolved promises in set, it wouldn't fix the issue because the resolved value would be stale state.

The only way I can think of solving the issue is to await the async values before calling set:

import produce from "immer";
import create from "zustand";

const fetchThing = () => Promise.resolve("thing");

const [, api] = create((set, get) => {
  const setState = fn => set(produce(get(), fn));
  return {
    things: [],
    async addThing() {
      setState(draft => {
        draft.things.push("first thing");
      });

      const asyncThing = await fetchThing();

      setState(draft => {
        draft.things.push(asyncThing);
      });
    }
  };
});

api.subscribe(console.log);
api.getState().addThing();

[drcmda]

Sure it's the same thing essentially.

[Magellol]

Thanks for the replies :)

@drcmda Just so I understand, are you saying that the method proposed by @JeremyRH right above wouldn't work either? I've tried both in codesandbox and it seems I can yield the same results (yours and Jeremy's solution). https://codesandbox.io/s/v6qno7xznl

[Magellol]

Thanks for clarifying. I think we can close this issue then.