집 > 기사 > 웹 프론트엔드 > 상태의 소스 코드에 createStore가 설명되어 있습니다.

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

王林원래의: 2024-09-07 06:36:02494검색

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

createStore in Zustand

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
}

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

getState

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

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

getInitialState

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

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

생성상태

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

const createStoreImpl: CreateStoreImpl = (createState) => {

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

createStore in 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라는 사용자 정의 함수를 매개변수로 전달해 보겠습니다.

createStore in Zustand

위 이미지는 매개변수가 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에 테스트를 노출시켰기 때문에 생성 함수를 초기화하면 이 함수에 접근할 수 있습니다

createStore in Zustand