state的源代码中对createStore进行了解释。-js教程-PHP中文网

state的源代码中对createStore进行了解释。

王林

发布： 2024-09-07 06:36:02

原创

429 人浏览过

In this article, we will understand how createStore in Zustand’s source code is written/works.

createStore in Zustand

createStore is exported from vanilla.ts and you will find this at the end of the file.

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

登录后复制

createStore is arrow function that accepts a parameter called createState. if createState exists, createStoreImpl(createState) is called.

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
}

登录后复制

In our previous articles, I have written about how setState, subscribe work. We will cover the remaining functions such as getState, getInitialState, createState.

getState

getState simply returns the state that is declared at the top of this createStoreImpl function.

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

登录后复制

getInitialState

getInitialState returns the initialState.

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

登录后复制

createState

createState is used to initialise the state variable.

const createStoreImpl: CreateStoreImpl = (createState) => {

登录后复制

createState is a parameter in createStoreImpl. Let’s run some experiments using the demo example provided in the Zustand’s repo.

createStore in Zustand

This is basically just what you pass into “create”

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

登录后复制

State initialisation happens in vanilla.ts at L93, even though create is originally exported from React, react.ts internally calls createStore in vanilla.ts.

So how does calling createState initializes the state?

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

登录后复制

The trick lies in calling the arrow function, createState. From the above code snippet, you can see that createState is called with setState, getState, api

Let’s run some experiments with this information. Let’s pass a custom function named test as the parameter without the original parameters.

createStore in Zustand

The above image shows the custom test function I added to demonstrate how the parameters are passed to createState function.

let’s now see this internal test function in action. For us to access this test function, the following example shows how createStore can be initialised with this newly added test parameter.

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

登录后复制

Because we exposed test in vanilla.mjs as shown below, you will have access to this function when you initialise the create function

createStore in Zustand