state的原始碼中對createStore進行了解釋。-js教程-PHP中文網

在本文中，我們將了解 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 type Listener = (state: TState, prevState: TState) => void let state: TState const listeners: Set = new Set() const setState: StoreApi['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['getState'] = () => state const getInitialState: StoreApi['getInitialState'] = () => initialState const subscribe: StoreApi['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['getState'] = () => state

登入後複製

取得初始狀態

getInitialState 傳回初始狀態。

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

登入後複製

建立狀態

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