How to dispatch actions in Components

As I am learning zustand, I really like it. It is simple, lightweight and super fast. So I am trying a new project and I have a question.

How can i fetch actions via UI?

This is my orderStore file

const orderState = create((set, get) => ({
  orders: [],
  getOrders: async (orders) => {
    try {
      set({ orders });
      return get().orders;
    } catch (error) {
      throw error?.response.data || "An Error Occured";
    }
  },
}));

export default orderState;

And I want to call this action in Component ( .tsx ) How can i do that? If I call within useEffect it say Hooks Error.

const getOrders = orderState((state) => state.getOrders);

Please Help Me.

[dai-shi]

yes.

The idiomatic way is to get a callback with useStore.

const useOrderStore = create((set) => ({
  orders: [],
  getOrders: async () => {
    try {
      const orders = await fetchOrders();
      set({ orders });
      return orders;
    } catch (error) {
      throw error?.response.data || "An Error Occured";
    }
  },
}));

const Component = () => {
  const getOrders = useOrderStore(state => state.getOrders);
  useEffect(() => {
    getOrders().then(orders => console.log(orders));
  }, [getOrders])
  // ...
}

[dai-shi]

It works even if it’s nested. The caveat is that you need to merge when updating the state. The library only shallow merges it.

https://github.com/pmndrs/zustand/blob/896554237eb1c258bc20e0c87abe9eba65282a66/src/vanilla.ts#L68