본문으로 건너뛰기

함수: createStoreContext()

function createStoreContext<TValue>(): object;

정의 위치: solid-store/src/createStoreContext.tsx:43

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

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

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

타입 매개변수​

TValue​

TValue extends object

반환값​

object

StoreProvider()​

StoreProvider: (props) => Element;

매개변수​

props​

ParentProps&lt;{ value: TValue; }>

반환값​

Element

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 외부에서 호출하면 예외가 발생합니다.