zustand 사용하기 🚀

스토어 만들기

const useStore = create(set=>({
    bears: 0,
    increasePopulation: () => set(state => ({ bears: state.bears + 1})),
    removeAllBears: () => set({ bears:0 });
}))

set 함수는 state를 병합해주는 함수로써 객체, 함수등을 넣어서 사용할 수 있다.

구성요소 바인딩

provider가 따로 필요하지 않으며 어느 페이지에서나 가져와서 사용하면 된다.
상태를 선택하면 구성 요소가 변경 사항에 따라 다시 렌더링 된다.

const BearCounter = () => {
    const bears = useStore(state => state.bears);
  return <h1> {bears} around here...</h1>
}

const Controls = () => {
  const increasePopulation = useStore(state => state.increasePopulation);
  return <button onClick={increasePopulation}>one up</button>
}

zustand vs context vs 리덕스

zustand는 훅을 주요 수단으로 만들기 때문에 단순하다는데에 사용성이 좋다는 의견이 많다.
또한 컨텍스트 제공할 때 앱을 래핑하지 않아도 되며 이는 곧 불필요한 렌더링의 최소화를 의미한다.

fetching

const state = useStore();

상태를 조각내기

기본적으로 엄격한 동등으로 변경 사항을 감지하기 때문에 원자 상태 선택에 효율적이다.

import shallow from 'zustand/shallow'

// 객체 선택: state.nuts 또는 state.honey가 변경될 때 구성 요소를 재렌더링함.
const { nuts, honey } = useStore(state => ({ nuts: state.nuts, honey: state.honey }));

// 배열 선택: state.nuts 또는 state.honey가 변경될 때 구성 요소를 재렌더링함.
const [nuts, honey] = useStore(state => [state.nuts, state.honey], shallow)

// 매핑 선택: state.treats가 순서, 개수 또는 키의 변경 사항을 처리할 때 구성 요소를 재렌더링함.
const treats = useStore(state => Object.keys(state.treats, shallow))

재렌더링에 대한 더 많은 제어를 위해 사용자 정의 동등 기능을 사용할 수 있다.

const treats = useStore(state => state.treats, (oldTreats, newTreats) => compare(oldTreats, newTreats))

reading/writing state

const useStore = create(()=>({paw: true, snout: true, fur: true}));

// 반응하지 않는 fresh state 얻기
const paw = useStore.getState().paw

// 모든 변경 사항 수신 및 동기적 실행
const unsub1 = useStore.subscribe(console.log)

// state 업데이트 중에 리스너 트리거
useStore.setState({paw: false})

// 모든 리스너 제거
useStore.destroy()

훅스로도 사용할 수 있다.

const Component = () => {
    const paw = useStore(state=>state.paw);
}

Read from state in actions

set은 fn-updates set(state => result)를 허용하지만 get을 통해 외부 상태에 계속 액세스할 수 있다.

const useStore = create((set, get)) => ({
    sound: "grunt",
      action: () => {
        const sound = get().sound
    }
})