Home > Web Front-end > JS Tutorial > body text

useBoundStoreWithEqualityFn in Zustand's source code explained.

王林
Release: 2024-09-11 06:37:35
Original
488 people have browsed it

In this article, we will understand how the useBoundStoreWithEqualityFn function is used in Zustand’s source code.

useBoundStoreWithEqualityFn in Zustand’s source code explained.

The above code is picked from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80

useBoundStoreWithEqualityFn is called in createWithEqualityFnImplfunction and returns another function named useStoreWithEqualityFn.

Let’s look at what’s in useStoreWithEqualityFn.

// Pulled from https://github.com/pmndrs/zustand/blob/main/src/traditional.ts#L80
export function useStoreWithEqualityFn<TState, StateSlice>(
  api: ReadonlyStoreApi<TState>,
  selector: (state: TState) => StateSlice = identity as any,
  equalityFn?: (a: StateSlice, b: StateSlice) => boolean,
) {
  const slice = useSyncExternalStoreWithSelector(
    api.subscribe,
    api.getState,
    api.getInitialState,
    selector,
    equalityFn,
  )
  useDebugValue(slice)
  return slice
}
Copy after login

useSyncExternalStore is a React Hook that lets you subscribe to an external store and useSyncExternalStoreWithSelector is imported as shown below:

import useSyncExternalStoreExports from 'use-sync-external-store/shim/with-selector'
Copy after login

slice returned by this function, useStoreWithEqualityFn is further used in createWithEqualityFnImpl .

const useBoundStoreWithEqualityFn: any = (
  selector?: any,
  equalityFn = defaultEqualityFn,
) => useStoreWithEqualityFn(api, selector, equalityFn)

Object.assign(useBoundStoreWithEqualityFn, api)

return useBoundStoreWithEqualityFn
Copy after login

Object.assign updates the slice returned by useBoundStoreWithEqualityFn with the “api”.

The screenshot below demonstrates with an example how Object.assign does the update

useBoundStoreWithEqualityFn in Zustand’s source code explained.

and finally useBoundStoreWithEqualityFn is returned by createWithEqualityFnImpl.

About us:

At Think Throo, we are on a mission to teach the best practices inspired by open-source projects.

10x your coding skills by practising advanced architectural concepts in Next.js/React, learn the best practices and build production-grade projects.

We are open source — https://github.com/thinkthroo/thinkthroo (Do give us a star!)

Up skill your team with our advanced courses based on codebase architecture. Reach out to us at hello@thinkthroo.com to learn more!

References:

  1. https://github.com/search?q=useBoundStore&type=code

  2. https://github.com/churichard/notabase



The above is the detailed content of useBoundStoreWithEqualityFn in Zustand's source code explained.. For more information, please follow other related articles on the PHP Chinese website!

source:dev.to
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template