[Zustand] 상태 값 초기화 하기

"react": "^18.2.0",
"zustand": "^4.5.2"
"typescript": "^5.2.2"

How to reset state

zustand에서는 상태값을 초기화시켜주는 내장 함수를 제공해주고 있을까?

찾아보니 따로 제공해주고 있는게 없어 별도로 정의해 사용해야만 한다.

 

그래도 공식문서에서 이러한 방식들이 있다고 안내해주고 있어 참고하여 만들어두면 좋다.

공식문서의 코드를 그대로 가져와보자.

import { create } from 'zustand'

// define types for state values and actions separately
type State = {
  salmon: number
  tuna: number
}

type Actions = {
  addSalmon: (qty: number) => void
  addTuna: (qty: number) => void
  reset: () => void
}

// define the initial state
const initialState: State = {
  salmon: 0,
  tuna: 0,
}

// create store
const useSlice = create<State & Actions>()((set, get) => ({
  ...initialState,
  addSalmon: (qty: number) => {
    set({ salmon: get().salmon + qty })
  },
  addTuna: (qty: number) => {
    set({ tuna: get().tuna + qty })
  },
  reset: () => {
    set(initialState)
  },
}))

뭐 일단 내가 생각해도 가장 쉽게 구현할 수 있는 건 이 방법뿐이었는데 마침 공식문서에서도 동일하게 안내해주고 있어서 코드를 그대로 가져와봤다.

 

더 손쉽게 하는 방법이 없을까 개인적으로 연구중인데 안타깝지만 진전이 없다...

 

그 외에도 여러 방식을 소개해주고 있는데 아래 공식문서 참고해 보자.

---

출처: https://docs.pmnd.rs/zustand/guides/how-to-reset-state

Zustand Documentation