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

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

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 のリポジトリで提供されているデモの例を使用して、いくつかの実験を実行してみましょう。

これは基本的に「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 という名前のカスタム関数をパラメーターとして渡しましょう。

上の画像は、パラメーターがどのように 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 でテストを公開したため、作成関数を初期化するときにこの関数にアクセスできるようになります

デモ例のボタンがクリックされたときに、このテスト関数をトリガーします。

これにより、テスト関数が呼び出されます。

これは高度な JavaScript アロー関数の使用法です。また、カスタム テスト関数を追加してデモ アプリで使用しました。それはクールですね。

私たちについて：

Think Throo では、オープンソース プロジェクトからインスピレーションを得たベスト プラクティスを教えるという使命を担っています。

Next.js/React の高度なアーキテクチャ概念を実践してコーディング スキルを 10 倍にし、ベスト プラクティスを学び、実稼働レベルのプロジェクトを構築します。

私たちはオープンソースです — https://github.com/thinkthroo/thinkthroo (スターを付けてください!)

あなたのビジネスに合わせたオーダーメイドの Web システムを構築したいですか? hello@thinkthroo.com

までご連絡ください。

著者について:

こんにちは、ラムです。私は情熱的なソフトウェア エンジニア/OSS Tinkerer です。

私のウェブサイトをチェックしてください: https://www.ramunarasinga.com/

参考文献:

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

以上がcreateStoreの状態のソースコードを説明しました。の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。