[Zustand] Zustand 설계 및 패턴

Zustand에서 비동기 로직을 처리하는 두 가지 방법

① 스토어 내부에 비동기 함수 정의
상태 관련 로직이 한 곳에 집중
상태 변경 흐름이 캡슐화
컴포넌트가 심플

② 비동기 로직을 외부에서 호출, 내부에서 상태만 관리
상태 업데이트와 API 호출 분리
복잡한 로직도 관리 용이
API 함수 재사용성 증가

Flux에서 영감을 받은 Zustand 패턴

Redux나 MobX와 유사한 구조

Flux: 모든 상태 변화는 명확한 경로를 따라 단방향으로 흐른다
(Action 발생 → Dispatcher를 거쳐 Store로 전달 → Store는 상태 변경 후 → View를 업데이트)

Flux의 4가지 주요 구성 요소

• VIEW: 리액트 컴포넌트 UI (store가 변경되면 리렌더링)
• ACTION: 무슨 일이 일어났는지 설명하는 객체
• DISPATCHER: 액션을 Store에 전달하는 중개자
• STORE: 상태와 로직을 담고 있는 객체
  
  

① 단일 스토어 구조를 유지
전역 상태를 하나의 스토어에!
규모가 커지면 slice로 분리

② 항상 set으로 상태를 업데이트
또는 setState 사용

③ 액션은 스토어 내부에 함께 정의
Redux처럼 reducer, dispatch 없어도 됨
대신, 직접 함수로 액션을 정의

④ 그래도 reducer 스타일이 익숙하다면? 전통적인 Redux 스타일도 가능
Zustand 내부에서도 리듀서와 디스패치를 사용 가능
또는 redux 미들웨어도 사용 가능

    import { redux } from ‘zustand/middleware’;

Slice 패턴

장바구니 슬라이스와 사용자 슬라이스를 하나의 스토어 안에 합쳐서 함께 사용

import { create } from ‘zustand’;

export const useBoundStore = create((...a) => ({
   …createCartSlice(…a),
   …createUserSlice(…a),
   ...createCombinedActionSlice(…a),
}));

persist 미들웨어 적용
(ex. 상태를 로컬 스토리지에 저장)
첫 번째 인자로 스토어 생성 로직, 두 번째 인자로 옵션을 지정
미들웨어는 반드시 합친 Store에만 적용 (각 Slice에 따로 미들웨어 적용 X)

import { persist } from ‘zustand/middleware’;

export const useBoundStore = create(
   persist(
      (…a) => ({
         …createCartSlice(…a),
         …createUserSlice(…a),
      }),
      { name: ‘bound-store’ } // 로컬 스토리지에 저장될 key 이름
   )
);