Zustand - state와 action을 분리하기

zustand에서는 redux와 같이

호출을 할 때는

const {count, plusNumber} = useCountStore()  

이런 식으로 호출을 하면 useCountStore 안에 있는 함수가 전부 재 호출이 되면서 메모리를 많이 차지 하게 된다.

뿐만 아니라

import { create } from 'zustand';

interface countType {
	count: number
}

const useCountStore = create<countType>(set => ({
	count: 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을 분리할 수 있다

분리방법
zustand 공식

먼저 useStore에는 state만 선언한다. 그리고 create<T>()((set)=>({...})) 이렇게 사용한다.

위의 코드는 currying()(...) 라고 하는데 이유는 타입추론때문이다. 참고 깃허브

또다른 깃허브 zustand 공식 깃허브

interface countType {
	count: number
}
export const useBoundStore = create<countType>()((set) => ({
  count: 0,
}))
 

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

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

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

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