상태의 소스 코드에 createStore가 설명되어 있습니다.

이 글에서는 Zustand 소스 코드의 createStore가 어떻게 작성/작동하는지 살펴보겠습니다.

createStore는 바닐라.ts에서 내보내지며 파일 끝에서 찾을 수 있습니다.

export const createStore = ((createState) =>
  createState ? createStoreImpl(createState) : createStoreImpl) as CreateStore

createStore는 createState라는 매개변수를 받는 화살표 함수입니다. createState가 존재하면 createStoreImpl(createState)가 호출됩니다.

createStoreImpl

const createStoreImpl: CreateStoreImpl = (createState) => {
  type TState = ReturnType<typeof createstate>
  type Listener = (state: TState, prevState: TState) => void
  let state: TState
  const listeners: Set<listener> = new Set()

  const setState: StoreApi<tstate>['setState'] = (partial, replace) => {
    // TODO: Remove type assertion once https://github.com/microsoft/TypeScript/issues/37663 is resolved
    // https://github.com/microsoft/TypeScript/issues/37663#issuecomment-759728342
    const nextState =
      typeof partial === 'function'
        ? (partial as (state: TState) => TState)(state)
        : partial
    if (!Object.is(nextState, state)) {
      const previousState = state
      state =
        (replace ?? (typeof nextState !== 'object' || nextState === null))
          ? (nextState as TState)
          : Object.assign({}, state, nextState)
      listeners.forEach((listener) => listener(state, previousState))
    }
  }

  const getState: StoreApi<tstate>['getState'] = () => state

  const getInitialState: StoreApi<tstate>['getInitialState'] = () =>
    initialState

  const subscribe: StoreApi<tstate>['subscribe'] = (listener) => {
    listeners.add(listener)
    // Unsubscribe
    return () => listeners.delete(listener)
  }

  const api = { setState, getState, getInitialState, subscribe }
  const initialState = (state = createState(setState, getState, api))
  return api as any
}
</tstate></tstate></tstate></tstate></listener></typeof>

이전 기사에서는 setState와 구독이 작동하는 방식에 대해 썼습니다. getState, getInitialState, createState 등 나머지 기능에 대해서도 다루겠습니다.

getState

getState는 단순히 이 createStoreImpl 함수의 상단에 선언된 상태를 반환합니다.

const getState: StoreApi<tstate>['getState'] = () => state
</tstate>

getInitialState

getInitialState는 초기 상태를 반환합니다.

const getInitialState: StoreApi<tstate>['getInitialState'] = () =>
    initialState
</tstate>

생성상태

createState는 상태 변수를 초기화하는 데 사용됩니다.

const createStoreImpl: CreateStoreImpl = (createState) => {

createState는 createStoreImpl의 매개변수입니다. Zustand 저장소에 제공된 데모 예제를 사용하여 몇 가지 실험을 실행해 보겠습니다.

이것은 기본적으로 "create"에 전달하는 내용입니다

// Create the store using Zustand
const useStore = create((set) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
}));

상태 초기화는 L93의 바닐라.ts에서 발생합니다. 생성이 원래 React에서 내보내졌음에도 불구하고, React.ts는 내부적으로 바닐라.ts에서 createStore를 호출합니다.

그렇다면 createState를 호출하면 어떻게 상태가 초기화되나요?

  const initialState = (state = createState(setState, getState, api))

비결은 화살표 함수인 createState를 호출하는 데 있습니다. 위의 코드 조각에서 createState가 setState, getState, api

로 호출되는 것을 볼 수 있습니다.

이 정보를 가지고 몇 가지 실험을 해보겠습니다. 원래 매개변수 없이 test라는 사용자 정의 함수를 매개변수로 전달해 보겠습니다.

위 이미지는 매개변수가 createState 함수에 전달되는 방법을 보여주기 위해 추가한 사용자 정의 테스트 함수를 보여줍니다.

이제 내부 테스트 기능이 실제로 작동하는 모습을 살펴보겠습니다. 이 테스트 기능에 액세스하기 위해 다음 예에서는 새로 추가된 테스트 매개변수를 사용하여 createStore를 초기화하는 방법을 보여줍니다.

// Create the store using Zustand
const useStore = create((set, get, api, test) => ({
  count: 1,
  inc: () => set((state) => ({ count: state.count + 1 })),
  test: () => test() 
}));

아래와 같이 바닐라.mjs에 테스트를 노출시켰기 때문에 생성 함수를 초기화하면 이 함수에 접근할 수 있습니다

데모 예시의 버튼을 클릭하면 이 테스트 기능이 실행됩니다.

이것은 차례로 테스트 함수를 호출합니다.

이것은 고급 JavaScript 화살표 기능 사용법입니다. 아, 방금 사용자 정의 테스트 기능을 추가하여 데모 앱에서 사용했습니다. 멋지네요.

회사 소개:

Think Throo에서는 오픈 소스 프로젝트에서 영감을 받은 모범 사례를 가르치는 임무를 수행하고 있습니다.

Next.js/React에서 고급 아키텍처 개념을 연습하여 코딩 기술을 10배로 늘리고 모범 사례를 배우고 프로덕션급 프로젝트를 구축하세요.

저희는 오픈 소스입니다 — https://github.com/thinkthroo/thinkthroo (별표를 주세요!)

귀사의 비즈니스에 맞는 맞춤형 웹 시스템을 구축하고 싶으십니까? hello@thinkthroo.com으로 문의하세요

저자 정보:

안녕하세요, 램이에요. 저는 열정적인 소프트웨어 엔지니어/OSS Tinkerer입니다.

내 웹사이트를 확인하세요: https://www.ramunarasinga.com/

참고자료:

1. https://github.com/pmndrs/zustand/blob/main/src/vanilla.ts#L97

위 내용은 상태의 소스 코드에 createStore가 설명되어 있습니다.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!