[TIL] [24.01.17] zustand에서 state와 action을 분리하기

zustand에서는 store함수안에 state와 action을 같이 사용한다.

import { create } from 'zustand';

interface countType {
    number: number
}

const useCountStore = create<ManagementCssType>(set => ({
    number: 0,

  plusNumber: (value) => set((state) => ({
    number: state.number + value
  }))
  miunsNumber: (value) => set((state) => ({
    number: state.number - value
  }))
}

export default useCountStore

 

이런식으로 하나의 store안에 state와 action을 선언한다.

단점은 코드가 길어지면 가독성이 떨어진다는 단점이 있다.

하나의 store안에 state와 action을 선언하지 않고 state와 action을 분리할 수 있다

분리방법

번저 useStore에는 state만 선언한다.

 

export const useBoundStore = create((set) => ({
  count: 0,
  text: 'hello',
  inc: () => set((state) => ({ count: state.count + 1 })),
  setText: (text) => set({ text }),
}))

 

그리고 action함수는 useStore안에 뒤에 setState를 메소드로 불러서 사용할 수 있는데 이것이 action함수가 된다.

 

export const useCountSotre = create(() => ({
  number: 0
}))

export const plusNumber = () => useCountSotre.setState((state) => ({ number: state.number + 1 }))

export const minusNumber = () => useCountSotre.setState((state) => ({ number: state.number 1 1 }))