반응형
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 }))
반응형
'TIL' 카테고리의 다른 글
[TIL][24.01.19] Project - useMutate에서 값 가져오기 (0) | 2024.01.20 |
---|---|
[TIL][24.01.18] zustand 작업, query hooks로 빼기 (1) | 2024.01.19 |
[TIL][24.1.16] 기존데이터, 더미데이터, 바뀐 데이터 (0) | 2024.01.17 |
[TIL][24.1.15] change handler (0) | 2024.01.16 |
[TIL][24.01.12] Zustand로 전역상태 관리하기 (1) | 2024.01.15 |