주스탄드의 슬라이스에서 다른 슬라이스의 상태를 참조하는 방법 feat.TypeScript

주스탄드의 슬라이스 패턴으로 상태와 액션을 관리하다 보면, 한 슬라이스에서 다른 슬라이스를 참조해야 할 일이 생기기도 한다.

예를 들어, "액세스 토큰(<- AuthSlice에서 관리)을 필요로 하는 마이 페이지 수정 요청(<- MyPageSlice에서 관리)" 같은 기능적 요구사항이 생길 수 있는 것이다.

그러나 useBoundStore같은, store를 호출하여 사용하는 일반적인 방법은 사용할 수 없다. 대신에 다음과 같은 우회적인 방법을 사용하여야 한다.

주스탄드의 슬라이스에서 다른 슬라이스의 상태를 참조하는 방법
1. StateCreator의 타입을, 참조하려는 다른 슬라이스의 타입과 인터섹션하여 선언한다.
2. get 메소드를 통해, 참조하려는 다른 슬라이스 상태 혹은 메소드에 접근한다.

이 방법으로, 다른 슬라이스에 존재하는 상태를 참조할 수 있다. 예시 코드는 다음과 같다.

export const createMyPageSlice: StateCreator<
MyPageSlice & customAxiosSlice,
[],
[],
MyPageSlice
> = (set, get) => ({
  myInfo: new UserDetailInfo(),
  getMyInfo: async (id: number) => {
    return await requestMyInfo(id, get().useCustomAxios());
  },
  setMyInfo: async (newInfo: Partial<UserDetailInfoType>) => {
    set((state) => ({ myInfo: { ...state.myInfo, ...newInfo } }));
  },
  updateMyInfo: async (
    id: number,
    editedInfo: Partial<UserDetailInfoType>
  ) => {
    return await requestUpdateMyInfo(editedInfo, id, get().useCustomAxios());
  },
  getMyProducts: async () => {
    return await requestMyProducts(get().useCustomAxios());
  },
});

이 예시 코드에서, MyPageSlice에서 customAxiosSlice의 메서드인 useCustomAxios를 가져와서 사용하는 것을 볼 수 있다.
(useCustomAxios 또한, AuthSlice의 상태인 accessToken과 refreshToken을 참조한다.)