react에서 Zustand를 사용하는 방법

Zustand

GitHub - pmndrs/zustand: 🐻 Bear necessities for state management in React

 

미니 리덕스...

리덕스의 보일러 플레이트에 관한 피로감이 상당하기 때문에

간단한 state를 다루기에 Zustand는 굉장히 유용하다.

 

import create from 'zustand'

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

 

create를 통해서 store를 만들어 준 후

각 함수를 통해서 state를 변화시킨다.

그 자체로 리듀서와 액션을 대체할 수 있다.

 

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

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

state를 확인하거나, 액션을 주는 것도 위와 같이 할 수 있다!

 

import shallow from 'zustand/shallow'

// Object pick, re-renders the component when either state.nuts or state.honey change
const { nuts, honey } = useStore(state => ({ nuts: state.nuts, honey: state.honey }), shallow)

// Array pick, re-renders the component when either state.nuts or state.honey change
const [nuts, honey] = useStore(state => [state.nuts, state.honey], shallow)

// Mapped picks, re-renders the component when state.treats changes in order, count or keys
const treats = useStore(state => Object.keys(state.treats), shallow)

얕은 복사에 대해서도 지원하고 있다.

 

미들웨어나 redux-like 문법들도 지원하고 있지만

필자는 그런 것들은 리덕스에서 하고 싶다...