CreateStoreContext()

zustand 와 함께 사용할 수 있는 createStoreContext 함수를 제공합니다. 지역적인 상태를 zustand 로 관리할 수 있습니다.

Signature

createStoreContext: <T, Mos extends [StoreMutatorIdentifier, unknown][] = []>(initializer: StateCreator<T, [], Mos>) => CreateStoreContextReturn<T, Mos>

Parameters

Parameter	Type	Description
initializer	StateCreator<T, [], Mos>

Returns

CreateStoreContextReturn<T, Mos>

Example

import { createStoreContext } from '@toktokhan-dev/zustand-create-store-context'

const {
  Provider: CountProvider,
  useContext: useCountContext,
  withProvider: withCountProvider,
} = createStoreContext((set, get, store) => ({
  count: 0,
  setCount: (count: number) =>
    set(() => {
      count
    }),
}))

const Component = () => {
 const count = useCountContext((store) => store.count)
 const setCount = useCountContext((store) => store.setCount)

 return (
   <div>
     <button onClick={() => setCount(count + 1)}>+</button>
     <span>{count}</span>
   </div>
 )
}

 const Component2 = withProvider(Component)

const App = () => {
  return (
    <>
      <CountProvider>
        <Component />
      </CountProvider>

     <Component2 />

     <CountProvider initialState={{ count: 10 }}>
       <Component />
     </CountProvider>

      {withCountProvider(Component, { count: 10 })}
    </>
  )
}