首頁 >web前端 >js教程 >state的原始碼中對createStore進行了解釋。

state的原始碼中對createStore進行了解釋。

王林原創: 2024-09-07 06:36:02622瀏覽

在本文中，我們將了解 Zustand 原始碼中的 createStore 是如何編寫/工作的。

createStore in Zustand

createStore 是從 vanilla.ts 匯出的，您可以在文件末尾找到它。

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

createStore 是箭頭函數，它接受一個名為 createState 的參數。如果 createState 存在，則呼叫 createStoreImpl(createState)。

建立StoreImpl

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、subscribe 如何運作。我們將介紹其餘的函數，例如 getState、getInitialState、createState。

獲取狀態

getState 僅傳回在此 createStoreImpl 函數頂部宣告的狀態。

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

取得初始狀態

getInitialState 傳回初始狀態。

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

建立狀態

createState 用來初始化狀態變數。

const createStoreImpl: CreateStoreImpl = (createState) => {

createState是createStoreImpl中的參數。讓我們使用 Zustand 儲存庫中提供的示範範例來執行一些實驗。

createStore in Zustand

這基本上就是您傳遞給「創建」的內容

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

狀態初始化發生在 vanilla.ts 的 L93 中，即使 create 最初是從 React 匯出的，react.ts 內部也會呼叫 vanilla.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() 
}));

因為我們在 vanilla.mjs 中暴露了測試，如下所示，當您初始化 create 函數時，您將可以存取此函數

createStore in Zustand