Clarification regarding state updates

[joshua-webdev]

Hi, I encountered the issue mentioned in this discussion here: #1394

I have a click event handler, in which I want to update my store, then right after updating the store, take some other followup action depending on the new state. However, the value in the component is not immediately updated, as discussed above.

const count = useCountStore((state) => state.count);
const increment = useCountStore((state) => state.increment);

function handleClick() {
  increment(1);
  if (count % 2 === 0) doSomethingElse();
}

The recommendation there was to have the action return the value immediately, but the specific example seemed a bit simplistic, in that the value being generated and returned is just a random number. In my case, I need to access the store state.

The set function returns void, and I couldn't see a way to refer to state outside of that function, so I had to do something like this:

import { create } from 'zustand';

type State = {
  count: number;
};

type Actions = {
  increment: (qty: number) => void;
};

export const useCountStore = create<State & Actions>((set) => ({
  count: 0,
  increment: (qty: number) => {
    let count;
    set((state) => {
      count = state.count + qty;
      return { count };
    });
    return count;
  },
}));

const increment = useCountStore((state) => state.increment);

function handleClick() {
  const newCount = increment(1);
  if (newCount % 2 === 0) doSomethingElse();
}

Is there a better way of doing this?

[dai-shi]

This would be better:

export const useCountStore = create((set, get) => ({
  count: 0,
  increment: (qty) => {
    set((state) => ({ count: state.count + qty });
    return get().count;
  },
}));

[joshua-webdev]

Ah, I see. Thank you!