Should I wait the set function's completed before I redirect the user?

[waggyman]

Hello everyone,

I got a little problem when using zustand. Especially when I deploy the application in the production server. I am currently using Zustand 4.4.7 and NextJs 14.1.0.

Why did I mention about production server? Because it worked smoothly in my local env (typical) but in the production sometimes it worked sometimes it doesn't work. Sometimes I need to wait few seconds before clicking the button so the state can be set correctly 😢

Anyway, here is what I am trying to do. When a user clicking a button, we will set the state and after that we use router.push() method to redirect the user to the next page.

Here is the store.

• checkoutStore.ts

export const readyToCheckoutStore = create((set, get) => ({
  items: [],
  total: {},
  setItems: async (data) => {
    console.log(`setting up items ${JSON.stringify(data)}`);
    set({ items: data });
  },
  resetState: () => {
    console.log("resetting state");
    set({
      items: [],
      total: {}
    });
  },
  setTotal: (key: string, value: any) => {
    set({ total: { ...get().total, [key]: value } });
  },
}));

here is the pages:

• carts/page.tsx

export default function CartPage() {
  // .... other states
  const { setItems, setTotal } = readyToCheckoutStore()
  const checkoutButtonClicked = () => {
    setTotal('grand_total', grandTotal);
    setTotal('tax_fee', taxFee);
    setItems([...itemsToCheckout]);
    router.push('/checkout');
  }

  return (
    <div>
      {/* others views */}
      <button onclick={checkoutButtonClicked}>Checkout</button>
    </div>
  )
}

• checkout/page.tsx

export default CheckoutPage() {
  const items = readyToCheckoutStore((state) => state.items);
  const total = readyToCheckoutStore((state) => state.total);

  return (
    <div>
      {/* other views */}
      {items.length > 0 ? (
        items.map((item) => (
          <div>{item.name}</div>
        ))
      ) : (
        <div>No items to checkout. Please select items</div>
      )}
    </div>
  )
}

From above files, When I click the checkout button in cart page. I should be able to see list of items when I am in /checkout page right? But instead of seeing list of items, I see No Items to checkout text. But in the console I can see the log like this:

setting up items [{name: 'shoes name changed because production data', price: 100, description: 'desc', quantity: 10}, {name: 'shoes 2 name changed because production data', price: 100, description: 'desc', quantity: 8}]

I also already tried to wrap the function to call setItems inside promise, then after await the wrapper I call the router.push but it's still not working.

Any help really appreciated. Thank you!