zustand store 내부에서 fetch 하기

현재 사이드 프로젝트 진행 중에 이런 방법도 있구나 하면서 올리는 글!

사이드 프로젝트에서 현재 zustand를 사용중에 있고

 

내가 맞딱드린 문제는 아래와 같다

 

커머스 관점으로 분석 및 개선 가능하게 장바구니를 서버에서 저장하기로 했다.!
근데 장바구니 갯수를 불러와 layout등에서 전역적으로 사용해야하는데 어떻게 하지?

 

상품 페이지에서 장바구니에 담을때 , 장바구니에서 삭제할때 , 장바구니에서 옵션 변경하여 상품이 삭제될때

위의 3가지의 변경점이 생길텐데 각각 어떻게 핸들링 해야할지 고민하다 zustand 공식 페이지에서 store 내부에서 fetch가 가능한 모습을 보고 작성하게 되었다.

 

zustand에서는 비동기 액션이라고 정의해두었다.

 

공식문서에 나와있는 async action

const useFishStore = create((set) => ({
  fishies: {},
  fetch: async (pond) => {
    const response = await fetch(pond)
    set({ fishies: await response.json() })
  },
}))

 

 

나의 경우는 아래와 같다

 

itemCount default는 0으로 두고 setItemCount는 itemCount를 변경하는 용도로 추가하였다.

 

fetchCartItemCount로 비동기 작업인 fetch를 작성하였다.

 

결과값을 받아온다면 set을 통해 값을 추가하여 전역적으로 itemCount를 사용할수 있게 만들었다

interface CartState {
  itemCount: number;
  setItemCount: (count: number) => void;
  fetchCartItemCount: (userId: number) => Promise<void>;
}

export const useCartCountStore = create<CartState>((set) => ({
  itemCount: 0,
  setItemCount: (count) => set({ itemCount: count }),
  fetchCartItemCount: async (userId) => {
    try {
      const res = await commonFetch(
        `${process.env.NEXT_PUBLIC_API_URL}/cart/count?user_id=${userId}`,
        "get"
      );
      if (res) {
        set({ itemCount: res.totalCount });
      }
    } catch (error) {
      if (error instanceof Error) {
        alert(error.message);
      }
    }
  },
}));

 

 

사용하는 부분에서는 아래와 같이 진행하였다

 

상품을 장바구니에 추가시키는 코드이다.

 

fetchCartItem을 store에서 불러와서 userId를 꽂아주고 

성공 모달을 열수 있도록 변경완료!

  try {
      const res = await commonFetch(
        `${process.env.NEXT_PUBLIC_API_URL}/cart`,
        "post",
        payload
      );
      if (res) {
        await fetchCartItemCount(userId);
        setIsModalOpen(true);
      }

 

 

여타 상태관리 라이브러리를 많이 사용해본건 아니지만

 

store 내부에서 fetch를 해서 받아온다는건 신기했던거 같다.

 

zustand async action 적용 끄읕

 

 

참조

https://github.com/pmndrs/zustand#async-actions

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React