함수: createStoreContext()

function createStoreContext<TValue>(): object;

정의 위치: packages/react-store/src/createStoreContext.tsx:40

아톰과 스토어 묶음을 하위 트리와 공유할 수 있는 타입이 지정된 React 컨텍스트를 생성합니다.

반환된 StoreProvider는 제공된 객체를 React 컨텍스트를 통해 전달하기만 합니다. 사용자는 컨텍스트의 아톰과 스토어를 구조 분해한 다음 기존 훅인 useSelector, useSelector, useAtom과 조합합니다.

객체 형태가 그대로 유지되므로 키가 지정된 아톰과 스토어는 useStoreContext()로 다시 읽을 때도 완전한 타입 정보를 유지합니다.

타입 매개변수

TValue

TValue extends object

반환값

object

StoreProvider()

StoreProvider: (props) => ReactElement;

매개변수

props

object & object

반환값

ReactElement

useStoreContext()

useStoreContext: () => TValue;

반환값

TValue

예시

const { StoreProvider, useStoreContext } = createStoreContext<{
  countAtom: Atom<number>
  totalsStore: Store<{ count: number }>
}>()

function CountButton() {
  const { countAtom, totalsStore } = useStoreContext()
  const count = useSelector(countAtom)
  const total = useSelector(totalsStore, (state) => state.count)

  return (
    <button
      type="button"
      onClick={() => totalsStore.setState((state) => ({ ...state, count: state.count + 1 }))}
    >
      {count} / {total}
    </button>
  )
}

예외

useStoreContext()를 일치하는 StoreProvider 외부에서 호출하면 예외가 발생합니다.