Effic 개발일지 - Day 7

Effic 개발 일지 : 7일차

할 일

• zustand redux 개발자 도구 설정
• zustand store에 immer 적용하여 state 업데이트

zustand 에서 TS를 이용해 redux-devtools를 이용하는 방법

zustand에서는 크롬 확장 중 하나인 redux-devtools를 이용해 redux와같이

크롬 개발자 도구에서 확인할 수 있다.

https://docs.pmnd.rs/zustand/guides/typescript#using-middlewares

// todoStore
import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";

export const useTodoStore = create<IStore>()(
  devtools(
    persist(
      (set) => ({
        todos: initialTodos,
        addTodo: (todo: ITodo) =>
          set((state) => ({ todos: [...state.todos, todo] })),
      }),
      { name: "todoStore" }
    )
  )
);

• zustand/middleware 패키지의 devtools와 persist를 이용한다.
• devtools와 persist를 추가하면, 크롬 개발자 도구에서 redux devtools를 통해 zustand 스토어를 확인할 수 있다.
• devtools로 개발자 도구 사용을 true로 변환
• persist를 통해, 인수인 name option의 이름으로 브라우저 store에 해당 store를 저장

zustand 에 immer 적용

기존의 zustand에서는 store에 정보를 변경할 때 , 객체의 얕은 병합을 통해 상태를 업데이트 할 수 있었는데

immer middleware를 적용하면, redux-toolkit으로 상태를 변경하는 것처럼

상태의 불변성을 유지하면서, 더욱 간단한 실행코드, 할당문으로 상태르 변경할 수 있고,

복잡한 변경 처리가 더 쉬워진다. (개인적)

• zustand immer middleware

import { produce } from "immer";
import { v4 } from "uuid";
import { create } from "zustand";
import { devtools, persist } from "zustand/middleware";
import { immer } from "zustand/middleware/immer";

export const useTargetStore = create<ITargetStroe>()(
  devtools( // devtools 적용 1
    persist( // devtools 적용 2
      immer((set) => ({ //immer 적용 부분
        targets: initialTargets,
        addTarget: (target: TTarget) =>
          set((state: ITargetStroe) => {
            state.targets.push(target);
            // targets: [...state.targets, target],
          }),
        removeTarget: (targetId: string) =>
          set((state: ITargetStroe) => {
            state.targets = state.targets.filter(
              (target) => target.id !== targetId
            );
          }),
        updateTarget: (target: TTarget) =>
          set((state: ITargetStroe) => {
            const { id, content } = target;
            state.targets = state.targets.map((target) =>
              target.id === id
                ? {
                    id: id,
                    content: content,
                  }
                : target
            );
          }),
      })),
      { name: "targetStore" }
    )
  )
);

• immer로 set으로 이루어 지는 모든 부분을 감싸서, 객체 불변 업데이트 방식을 적용하였다.
• 위 처럼 immer로 감싸는 방법 외에도 immer 라이브러리의 produce를 이용하는 방법도 존재한다.