[React] 전역 상태 관리 Zustand의 미들웨어 사용해 보기

아래 강의를 수강하며 배운 내용을 정리한 글입니다

[한 입 크기로 잘라먹는 실전 프로젝트 - SNS 편 - 이정환] https://inf.run/SbJ8w

 

 

이전 글에 이어서 이번에는 zustand의 middlewares를 사용해 보겠습니다

 

 

← 이전 글 보기

[React] 전역 상태 관리 Zustand 사용해보기

 

 

1. combine

상태와 함수를 합쳐주며 타입 자동 추론을 제공합니다

create(
  combine({ count: 0 }, (set, get) => ({
    actions: {
      increase: () => {
        set((state) => ({ count: state.count + 1 }));
      },
      decrease: () => {
        set((state) => ({ count: state.count - 1 }));
      },
    },
  })),
);

 

 

2. immer

상태를 직접 수정하는 방식으로 사용할 수 있습니다

 

사용을 위해서 아래 명령어를 통해 설치가 필요합니다

npm i immer

export const useCountStore = create(
  immer(
    combine({ count: 0 }, (set, get) => ({
      actions: {
        increase: () => {
          // set((state) => ({ count: state.count + 1 }));
          set((state) => {
            state.count += 1;
          });
        },
        decrease: () => {
          // set((state) => ({ count: state.count - 1 }));
          set((state) => {
            state.count -= 1;
          });
        },
      },
    })),
  ),
);

 

 

3. subscribeWithSelector

특정 상태의 변화에 따라 반응(구독)할 수 있도록 해줍니다

export const useCountStore = create(
  subscribeWithSelector(
    immer(
      combine({ count: 0 }, (set, get) => ({
        actions: {
          increase: () => {
            set((state) => {
              state.count += 1;
            });
          },
          decrease: () => {
            set((state) => {
              state.count -= 1;
            });
          },
        },
      })),
    ),
  ),
);

useCountStore.subscribe(
  (store) => store.count,
  (count, prevCount) => console.log(count, prevCount),
);

 

 

4. persist

저장소에 상태를 저장해서 꺼내와 쓸 수 있도록 해줍니다

 

- name: 사용할 key값 (필수)

- partialize: 저장할 상태 선택

- storage: 저장소 지정 localStorage(기본값)/sessionStorage

export const useCountStore = create(
  persist(
    subscribeWithSelector(
      immer(
        combine({ count: 0 }, (set, get) => ({
          actions: {
            increase: () => {
              set((state) => {
                state.count += 1;
              });
            },
            decrease: () => {
              set((state) => {
                state.count -= 1;
              });
            },
          },
        })),
      ),
    ),
    {
      name: "countStore",
      partialize: (store) => ({
        count: store.count,
      }),
      storage: createJSONStorage(() => sessionStorage),
    },
  ),
);

 

 

5. devtools

상태변화를 개발자모드에서 쉽게 확인할 수 있도록 해줍니다

 

- name: Redux DevTools에 표시될 스토어명

 

https://chromewebstore.google.com/detail/redux-devtools/lmhkpmbekcpmknklioeibfkpmmfibljd?hl=ko

Redux DevTools - Chrome 웹 스토어

export const useCountStore = create(
  devtools(
    persist(
      subscribeWithSelector(
        immer(
          combine({ count: 0 }, (set, get) => ({
            actions: {
              increase: () => {
                set((state) => {
                  state.count += 1;
                });
              },
              decrease: () => {
                set((state) => {
                  state.count -= 1;
                });
              },
            },
          })),
        ),
      ),
      {
        name: "countStore",
        partialize: (store) => ({
          count: store.count,
        }),
        storage: createJSONStorage(() => sessionStorage),
      },
    ),
    { name: "countStore" },
  ),
);

 

 

* 미들웨어를 적용할 때에는 순서 또한 중요합니다

devtools > persist > subscribeWithSelector > immer > combine 순 추천