인프런 커뮤니티 질문&답변

현업에서는 Redux를 쓰고 있어요. ㅠㅜ

신규 프로젝트 한다면 Zustand를 도입할것 같네요.

특히 비동기 처리 부분의 경우 Redux는 thunk, saga를 이용하는데요.

zustand는 JS의 비동기처리 방식과 거의 유사하게 가능하죠.

아래는 zustand에서 API 처리하는 예시인데, 이런 경우도 고려하면서 사용하면 문제없겠네요.!

import create from 'zustand';

const useStore = create((set) => ({
  data: null,
  loading: false,
  error: null,
  controller: null, // AbortController를 저장할 상태
  fetchData: async () => {
    set((state) => {
      // 기존 요청 취소
      if (state.controller) {
        state.controller.abort();
      }
      // 새로운 AbortController 생성
      const controller = new AbortController();
      return { loading: true, error: null, controller };
    });

    try {
      const response = await fetch('https://api.example.com/data', {
        signal: get().controller.signal,
      });
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      const data = await response.json();
      set({ data, loading: false, controller: null });
    } catch (error) {
      if (error.name === 'AbortError') {
        console.log('Fetch aborted');
      } else {
        set({ error, loading: false, controller: null });
      }
    }
  },
  resetData: () => set((state) => {
    // 기존 요청 취소
    if (state.controller) {
      state.controller.abort();
    }
    return { data: null, loading: false, error: null, controller: null };
  }),
}));

export default useStore;