createStore dalam kod sumber negeri dijelaskan.

Dalam artikel ini, kami akan memahami cara createStore dalam kod sumber Zustand ditulis/berfungsi.

createStore dieksport daripada vanilla.ts dan anda akan menemuinya di hujung fail.

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

createStore ialah fungsi anak panah yang menerima parameter yang dipanggil createState. jika createState wujud, createStoreImpl(createState) dipanggil.

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
}

Dalam artikel kami sebelum ini, saya telah menulis tentang cara setState, subscribe berfungsi. Kami akan meliputi fungsi yang selebihnya seperti getState, getInitialState, createState.

getState

getState hanya mengembalikan keadaan yang diisytiharkan di bahagian atas fungsi createStoreImpl ini.

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

getInitialState

getInitialState mengembalikan initialState.

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

createState

createState digunakan untuk memulakan pembolehubah keadaan.

const createStoreImpl: CreateStoreImpl = (createState) => {

createState ialah parameter dalam createStoreImpl. Mari jalankan beberapa percubaan menggunakan contoh tunjuk cara yang disediakan dalam repo Zustand.

Ini pada asasnya hanyalah perkara yang anda lakukan untuk "buat"

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

Pemulaan keadaan berlaku dalam vanilla.ts pada L93, walaupun create pada asalnya dieksport daripada React, react.ts secara dalaman memanggil createStore dalam vanilla.ts.

Jadi bagaimanakah cara memanggil createState memulakan keadaan?

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

Helahnya terletak pada memanggil fungsi anak panah, createState. Daripada coretan kod di atas, anda boleh melihat createState dipanggil dengan setState, getState, api

Mari jalankan beberapa percubaan dengan maklumat ini. Mari lulus fungsi tersuai bernama ujian sebagai parameter tanpa parameter asal.

Imej di atas menunjukkan fungsi ujian tersuai yang saya tambahkan untuk menunjukkan cara parameter dihantar ke fungsi createState.

mari kita lihat fungsi ujian dalaman ini dalam tindakan. Untuk kami mengakses fungsi ujian ini, contoh berikut menunjukkan cara createStore boleh dimulakan dengan parameter ujian yang baru ditambah ini.

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

Oleh kerana kami mendedahkan ujian dalam vanilla.mjs seperti yang ditunjukkan di bawah, anda akan mempunyai akses kepada fungsi ini apabila anda memulakan fungsi cipta

Saya mencetuskan fungsi ujian ini apabila butang dalam contoh demo diklik.

Ini, seterusnya, memanggil fungsi ujian.

Ini ialah beberapa penggunaan fungsi anak panah JavaScript lanjutan dan oh, kami juga baru menambah fungsi ujian tersuai dan digunakan dalam apl tunjuk cara. Itu bagus.

Tentang kami:

Di Think Throo, kami berada dalam misi untuk mengajar amalan terbaik yang diilhamkan oleh projek sumber terbuka.

10x kemahiran pengekodan anda dengan mempraktikkan konsep seni bina lanjutan dalam Next.js/React, pelajari amalan terbaik dan bina projek gred pengeluaran.

Kami adalah sumber terbuka — https://github.com/thinkthroo/thinkthroo (Beri kami bintang!)

Ingin membina sistem web yang dipesan lebih dahulu untuk perniagaan anda? Hubungi kami di hello@thinkthroo.com

Mengenai pengarang:

Hei, saya Ram. Saya seorang jurutera perisian/OSS Tinkerer yang bersemangat.

Lihat tapak web saya: https://www.ramunarasinga.com/

Rujukan:

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

Atas ialah kandungan terperinci createStore dalam kod sumber negeri dijelaskan.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!