Zustand 使用優化：關于自動生成選擇器
Zustand[1] 是目前 React 生態里比較受歡迎的一個狀態庫，主要是因為用法上的簡潔。
Zustand 簡單使用
首先安裝 zustand：
# NPM
npm install zustand
# Or, use any package manager of your choice.接著從 zustand 庫中引入 create API 就能創建同時包含狀態和用于修改狀態的方法的 Store 對象了。
import { create } from 'zustand'
const useBearStore = create((set) => ({
bears: 0,
increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
removeAllBears: () => set({ bears: 0 }),
updateBears: (newBears) => set({ bears: newBears }),
}))這里，create() 接受一個回調函數用于定義初始 Store 中包含的內容：
- bears 是狀態
- increasePopulation()、removeAllBears()、updateBears() 則是用于修改 bears 這個狀態的方法，又叫 Action
同時，create() 返回的 useStore() 是一個 React Hook。useBearStore() 接收的是一個用于從 Store 中提取內容的回調函數，又叫“選擇器（Selector）”。
接下來，就可以在你的組件中使用 useBearStore() 了。
你可以引入狀態：
function BearCounter() {
const bears = useBearStore((state) => state.bears)
return <h1>{bears} around here...</h1>
}
圖片
也可以引入用于修改狀態的方法：
function Controls() {
const increasePopulation = useBearStore((state) => state.increasePopulation)
return <button onClick={increasePopulation}>one up</button>
}如此一來，你在 <Controls /> 中調用修改 increasePopulation() 后，會觸發 state.bears 的值加 1，接著就能在 <BearCounter /> 中看到新的值了。
圖片
掌握了以上關于 Zustand 的基本用法后，其實你就可以開發項目了。
不過，你想更進一步提升開發體驗，那么就要去解決這個過程當中的一些使用痛點。
其中一個是關于更新嵌套狀態的，這在之前的文章《React 狀態庫 Zustand 入門教程》[2] 中有提到，有興趣的讀者可以移步閱讀。
不過，我們本次關注的是另一個痛點：就是從 Store 中獲取狀態/Action的過程。
自動生成選擇器
按照之前的介紹，在創建完 Store 之后，我們每次都要在組件中這樣去使用：
const bears = useBearStore((state) => state.bears)我們要使用這種方式從 Store 中提取狀態或是 Action。
不過每次頻繁這樣去寫這樣一個選擇器函數是很乏味的，這個時候我們就可以考慮借助一個工具函數，對我們的 Store 進行增強，支持狀態/Action的快捷訪問。
這就是我們要介紹的 createSelectors(store) 函數了——先亮代碼：
const createSelectors = (store) => {
store.use = {}
for (let k of Object.keys(store.getState())) {
store.use[k] = () => store((s) => s[k])
}
return store
}代碼量并不多，也好理解。
createSelectors() 接收的 store 就是前一節的 useBearStore，也就是 create() 的返回值。
createSelectors() 的作用很簡單，就是向 store 中添加一個 .use 屬性，用于快捷訪問其上的內容。
當然，這里有一個隱藏的點，就是可以通過 store.getState() 拿到當前 Store 的所有內容。
圖片
接著，修改之前的內容——為了便于區分，我們將原來的 useBearStore 該名稱 useBearStoreBase 了。經 createSelectors() 處理后，返回的是 useBearStore。
- const useBearStore = create((set) => ({
+ const useBearStoreBase = create((set) => ({
// ...
}))
+ const useBearStore = createSelectors(useBearStoreBase)現在，修改組件中使用 useBearStore 的地方。
function BearCounter() {
- const bears = useBearStore((state) => state.bears)
+ const bears = useBearStore.use.bears()
return <h1>{bears} around here...</h1>
}
function Controls() {
- const increasePopulation = useBearStore((state) => state.increasePopulation)
+ const increasePopulation = useBearStore.use.increasePopulation()
return <button notallow={increasePopulation}>one up</button>
}減少了一些代碼量，但是積少成多，也會提升一些開發體驗。
圖片
不過需要注意的是，每次使用 .use 獲取不管是狀態還是 Acton 時，都要帶上 () 的調用后綴。
// 不管是狀態還是 Action，后面都要帶上 `()`
const bears = useBearStore.use.bears()
const increasePopulation = useBearStore.use.increasePopulation()當然，現在項目中大都使用 TypeScript，為了獲得更好的類型提示，我們對 createSelectors() 進行改造，添加類型注解。
import { StoreApi, UseBoundStore } from 'zustand'
type WithSelectors<S> = S extends { getState: () => infer T }
? S & { use: { [K in keyof T]: () => T[K] } }
: never
const createSelectors = <S extends UseBoundStore<StoreApi<object>>>(
_store: S,
) => {
let store = _store as WithSelectors<typeof _store>
store.use = {}
for (let k of Object.keys(store.getState())) {
;(store.use as any)[k] = () => store((s) => s[k as keyof typeof s])
}
return store
}這也是官方給出的方案[3]，如果你對 TypeScript 不夠熟悉也沒關系，直接將上述代碼貼到項目中使用即可。
總結
本文我們講解了在使用 Zustand 時的一個小優化，關于自動生成選擇器。借助 createSelectors()，我們可以更加輕松、快捷的訪問 Store 中的狀態或是 Action。
好了，希望本文的內容對你的工作有所幫助。感謝閱讀，再見。
參考資料
[1]Zustand: https://docs.pmnd.rs/zustand
[2]《React 狀態庫 Zustand 入門教程》: https://juejin.cn/post/7388064351504056335#heading-4
[3]官方給出的方案: https://docs.pmnd.rs/zustand/guides/auto-generating-selectors#create-the-following-function:-createselectors
