프로젝트에 Zustand를 도입했으나

RTK(Redux-tool-kit)에 비하면 부족한점들이 보였다.

보일러플레이트도적고 쉽게 적용할수는 있으나

1. pending, fulfill, reject 상태를 적용할수가 없었고
2. log같은 바로 짜여진 middleWare가 보이지 않았었다.

그래서 아래와 같은 해결방법으로

1번을 해결하였다.

// src/store/superStore.ts

import { create } from 'zustand'
import {devtools, persist} from 'zustand/middleware'
import { log } from 'store';

interface CommonState {
  isLoading: boolean;
  error: any;
  pending : () => void;
  fulfill: () => void;
  reject : (error:any) => void;
  count :number;
  listConfig : {page:number, size:number};
  setListConfig: (partialListConfig:Partial<{page:number,size:number}>) => Promise<void>;
}

const initialCommonState: Partial<CommonState> = {
  isLoading: false,
  error: null,
  pending: () => {},
  fulfill: () => {},
  reject: () => {},
  count : 0,
  listConfig : {page:1, size:10},
}

const useSuperStore = create<CommonState>()(
  devtools(log(persist<CommonState>(
    (set:any) => (
    {
      isLoading: false,
      error: null,
      pending: () => set({isLoading:true, error:null}),
      fulfill: () => set({isLoading:false}),
      reject: (error) => set({isLoading:false, error}),
      count : 0,
      listConfig : {page:1, size:10},
      setListConfig: async (partialListConfig) => {
        set((state:CommonState) => ({ listConfig: { ...state.listConfig, ...partialListConfig } }))
        // 상태 업데이트 이후에 추가 작업 수행 가능
        // console.log('Form updated:');
      },
    }),{
      name: 'superStore'
    }
  )))

);

export default useSuperStore;

src/store에 superStore.ts라는 파일을 만들었다.

해당 store에는 isLoading,error, pending, fulfill, reject항목이 들어있다. 나머지는 프로젝트에 필요한 전체 config이다.

pending이 호출되면 { isLoading : true, error: null } 로 로딩상태를 만든다.

fulfill이 호출이되면 { isLoading:false } 로 로딩상태를 끝낸다.

reject이 호출되면 { isLoading:false, error } 로 error를 반환한다.

그럼 이제 이 상태를 사용을해야하는데 비즈니스로직은 jsx, tsx내에 있으면 안되기때문에 밖에서 사용하는 코드를 짜줘야한다.