ホームページ > 記事 > ウェブフロントエンド > createStoreの状態のソースコードを説明しました。

createStoreの状態のソースコードを説明しました。

王林オリジナル: 2024-09-07 06:36:02494ブラウズ

この記事では、Zustand のソースコードの createStore がどのように書かれ、どのように機能するかを理解します。

createStore in Zustand

createStore は vanilla.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、subscribe がどのように機能するかについて書きました。 getState、getInitialState、createState などの残りの関数について説明します。

状態の取得

getState は、単にこの createStoreImpl 関数の先頭で宣言された状態を返します。

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

getInitialState

getInitialState は、initialState を返します。

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 の vanilla.ts で行われます。create は元々 React からエクスポートされたものですが、react.ts は内部で vanilla.ts の createStore を呼び出します。

それでは、createState を呼び出すとどのように状態が初期化されるのでしょうか?

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

その秘訣は、アロー関数 createState を呼び出すことにあります。上記のコードスニペットから、setState、getState、api

を使用して createState が呼び出されていることがわかります。

この情報を使用していくつかの実験を実行してみましょう。元のパラメーターを使用せずに、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() 
}));

以下に示すように vanilla.mjs でテストを公開したため、作成関数を初期化するときにこの関数にアクセスできるようになります

createStore in Zustand