1.前言 #

1.1 什么是zustand #

1.2 zustand和其他状态管理库的比较 #

1.3 useSyncExternalStore #

1.4 immer #

immergraph.gif

import { produce } from 'immer';
let baseState = {
  ids: [1],
  pos: {
    x: 1,
    y: 1 
  }
}

let nextState = produce(baseState, (draft) => {
  draft.ids.push(2);
})
console.log(baseState.ids === nextState.ids);//false
console.log(baseState.pos === nextState.pos);//true

import { produce } from 'immer'
const baseState = {
  list: ['1', '2']
}
const result = produce(baseState, (draft) => {
  draft.list.push('3')
})
console.log(baseState);
console.log(result);

2.安装 #

npm install zustand immer --save

3.使用状态管理器 #

3.1 定义状态管理器 #

src\App.js

// 引入 zustand 库中的 create 函数
import { create } from './zustand';
/**
 * 定义了一个名为 useStore 的状态管理器,状态管理器有三个属性:number,add,minus
 * number 属性代表状态管理器中的状态,add 和 minus 函数分别是更新 number 属性的方法
 */
// 创建一个名为 useStore 的状态管理器
// 参数是一个createState方法,用来返回管理的状态
// useStore也是一个函数,可以通过调用它返回管理的状态
const useStore = create(set => ({
    // 定义 number 属性,初始值为 0
    number: 0,
    // 定义 name 属性,初始值为 Number
    name: 'Number',
    // 定义 add 函数,通过 set 函数更新状态
    add: () => set(state => ({ number: state.number + 1 })),
    // 定义 minus 函数,通过 set 函数更新状态
    minus: () => set(state => ({ number: state.number - 1 }))
}));

3.2 使用状态 #

src\App.js

// 引入 zustand 库中的 create 函数
import { create } from './zustand';
/**
 * 定义了一个名为 useStore 的状态管理器,状态管理器有三个属性:number,add,minus
 * number 属性代表状态管理器中的状态,add 和 minus 函数分别是更新 number 属性的方法
 */
// 创建一个名为 useStore 的状态管理器
const useStore = create(set => ({
    // 定义 number 属性,初始值为 0
    number: 0,
    // 定义 name 属性,初始值为 Number
    name: 'Number',
    // 定义 add 函数,通过 set 函数更新状态
    add: () => set(state => ({ number: state.number + 1 })),
    // 定义 minus 函数,通过 set 函数更新状态
    minus: () => set(state => ({ number: state.number - 1 }))
}));
// React组件展示了如何使用状态管理器中的状态和方法
function App() {
+    // 从useStore状态管理器中解构出了四个状态:name,number,add,minus
+    const { name, number, add, minus } = useStore();
+    return (
+        <div>
+            <p>{name}: {number}</p>
+            <button onClick={add}>+</button>
+            <button onClick={minus}>-</button>
+        </div>
+    );
}
export default App;

4.读取状态 #

4.1 zustand\index.js #

src\zustand\index.js

export * from './react';

4.2 react.js #

src\zustand\react.js

import { createStore } from './vanilla';
export function useStore(api) {
    return api.getState();
}
const createImpl = createState => {
    const api = createStore(createState);
    return () => useStore(api)
}
export const create = createState => createImpl(createState)
export default create;

4.3 vanilla.js #

src\zustand\vanilla.js

const createStoreImpl = createState => {
    let state;
    const getState = () => state;
    const setState = (partial) => {
        const nextState = typeof partial === 'function' ? partial(state) : partial;
        if (!Object.is(nextState, state)) {
            const previousState = state;
            state = Object.assign({}, state, nextState);
        }
    }
    const api = {
        getState,
        setState
    }
    state = createState();
    return api;
}
export const createStore = createState => createStoreImpl(createState)
export default createStore;

5.修改状态 #

5.1 vanilla.js #

src\zustand\vanilla.js

// 定义 createStoreImpl 函数,接收 createState 函数作为参数
const createStoreImpl = createState => {
    // 定义变量 state 和 listeners
    let state;
+    let listeners = new Set();
    // 定义函数 getState,返回 state 的值
    const getState = () => state;
    // 定义函数 setState,接收 partial 作为参数
    const setState = (partial) => {
        // 根据 partial 的类型,判断 nextState 的值
        const nextState = typeof partial === 'function' ? partial(state) : partial;
        // 如果 nextState 和 state 的值不同
        if (!Object.is(nextState, state)) {
            // 记录上一个状态
            const previousState = state;
            // 将 state 更新为 nextState
            state = Object.assign({}, state, nextState);
            // 遍历 listeners,执行每个监听器的回调函数
+            listeners.forEach(listener => listener(state, previousState));
        }
    }
+    // 定义函数 subscribe,接收 listener 作为参数
+    const subscribe = (listener) => {
+        // 将 listener 添加到 listeners 中
+        listeners.add(listener);
+        // 返回一个函数,用于从 listeners 中删除 listener
+        return () => listeners.delete(listener);
+    }
    // 定义变量 api,包含 getState、setState 和 subscribe 函数
    const api = {
        getState,
        setState,
+        subscribe
    }
    // 调用 createState 函数,初始化 state 的值
+    state = createState(setState, getState, api);
    // 返回 api
    return api;
}

// 定义 createStore 函数,接收 createState 函数作为参数,返回 createStoreImpl(createState)
export const createStore = createState => createStoreImpl(createState);

// 默认导出 createStore 函数
export default createStore;

5.2 react.js #

src\zustand\react.js

// 导入 createStore 函数
import { createStore } from './vanilla';
// 导入 useSyncExternalStore 函数
+import { useSyncExternalStore } from 'react';

// 定义 useStore 函数,接收 api 对象作为参数
export function useStore(api) {
    // 使用 useSyncExternalStore 函数从 api 中获取状态值
+    let value = useSyncExternalStore(api.subscribe, api.getState);
+    return value;
}

// 定义 createImpl 函数,接收 createState 函数作为参数
const createImpl = createState => {
    // 调用 createStore 函数创建状态管理器
    const api = createStore(createState);
    // 返回一个函数,该函数将 api 对象传递给 useStore 函数
    return () => useStore(api)
}

// 定义 create 函数,接收 createState 函数作为参数,返回 createImpl 函数的调用结果
export const create = createState => createImpl(createState);

// 默认导出 create 函数
export default create;

6.异步 #

// 引入 zustand 库中的 create 函数
import { create } from './zustand';
/**
 * 定义了一个名为 useStore 的状态管理器,状态管理器有三个属性:number,add,minus
 * number 属性代表状态管理器中的状态,add 和 minus 函数分别是更新 number 属性的方法
 */
// 创建一个名为 useStore 的状态管理器
const useStore = create(set => ({
    // 定义 number 属性,初始值为 0
    number: 0,
    // 定义 name 属性,初始值为 Number
    name: 'Number',
    // 定义 add 函数,通过 set 函数更新状态
    add: () => set(state => ({ number: state.number + 1 })),
    // 定义 minus 函数,通过 set 函数更新状态
    minus: () => set(state => ({ number: state.number - 1 })),
+ asyncAdd: () => {
+     setTimeout(() => {
+         set(state => ({ number: state.number + 1 }));
+     }, 1000);
+ }
}));
// React组件展示了如何使用状态管理器中的状态和方法
function App() {
    // 从useStore状态管理器中解构出了四个状态:name,number,add,minus
+    const { name, number, add, minus, asyncAdd } = useStore();
    return (
        <div>
            <p>{name}: {number}</p>
            <button onClick={add}>+</button>
            <button onClick={minus}>-</button>
+         <button onClick={asyncAdd}>async +</button>
        </div>
    );
}
export default App;

7.日志中间件 #

7.1 src\App.js #

src\App.js

import { create } from './zustand'; // 导入 create 函数从 './zustand' 模块中
+import logger from './zustand/middleware/logger'; // 导入 logger 中间件从 './zustand/middleware/logger' 模块中

// 创建一个名为 useStore 的状态钩子
// 该状态钩子使用 logger 中间件
// 该状态钩子的状态有 number, name, add, minus, asyncAdd 五个属性
+const useStore = create(logger((set) => {
    return {
        number: 0,
        name: 'Number',
        add: () => set(state => ({ number: state.number + 1 })),
        minus: () => set(state => ({ number: state.number - 1 })),
        asyncAdd: () => {
            setTimeout(() => {
                set(state => ({ number: state.number + 1 }));
            }, 1000);
        }
    }
}));

// 定义一个函数组件 App
// 该组件使用 useStore 状态钩子,解构出其状态对象的 number、name、add、minus 和 asyncAdd 属性
// 在组件渲染时展示 number 和 name 属性值,并提供三个按钮:add、minus 和 asyncAdd,分别调用对应的函数
function App() {
    const { number, name, add, minus, asyncAdd } = useStore();
    return (
        <div>
            <p>{name}:{number}</p>
            <button onClick={add}>+</button>
            <button onClick={minus}>-</button>
            <button onClick={asyncAdd}>async +</button>
        </div>
    );
}

export default App; // 导出 App 组件作为默认导出

7.2 logger.js #

src\zustand\middleware\logger.js

// 定义了一个名为 logger 的函数,它是一个高阶函数,因为它接收了一个函数作为参数并返回了一个新的函数
// 定义一个名为 logger 的常量,该常量是一个高阶函数,它接收一个名为 createState 的参数
const logger = (createState) =>
    // 返回一个新的函数,该函数接收三个参数:set,get,api
    (set, get, api) =>
        // 调用 createState 函数,并将三个参数作为它的参数
        createState(
            // 返回一个函数,该函数接收任意数量的参数,并执行以下操作:
            (...args) => {
                // 在控制台输出旧状态
                console.log(`old state:`, get())
                // 调用 set 函数,并将 args 作为它的参数
                set(...args)
                // 在控制台输出新状态
                console.log(`new state`, get())
            },
            // 将 get 作为参数传递给 createState
            get,
            // 将 api 作为参数传递给 createState
            api
        )
export default logger;

8.状态分片 #

8.1 App.js #

src\App.js

import { create } from './zustand'; // 导入 create 函数从 './zustand' 模块中
import logger from './zustand/middleware/logger'; // 导入 logger 中间件从 './zustand/middleware/logger' 模块中

// 创建一个名为 useStore 的状态钩子
// 该状态钩子使用 logger 中间件
// 该状态钩子的状态有 number, name, add, minus, asyncAdd 五个属性
const useStore = create(logger((set) => {
    return {
        number: 0,
        name: 'Number',
        add: () => set(state => ({ number: state.number + 1 })),
        minus: () => set(state => ({ number: state.number - 1 })),
        asyncAdd: () => {
            setTimeout(() => {
                set(state => ({ number: state.number + 1 }));
            }, 1000);
        }
    }
}));

// 定义一个函数组件 App
// 该组件使用 useStore 状态钩子,解构出其状态对象的 number、name、add、minus 和 asyncAdd 属性
// 在组件渲染时展示 number 和 name 属性值,并提供三个按钮:add、minus 和 asyncAdd,分别调用对应的函数
function App() {
+    const { number, name, add, minus, asyncAdd } = useStore(state => (
+        {
+            number: state.number,
+            add: state.add,
+            minus: state.minus,
+            asyncAdd: state.asyncAdd
+        }));
    return (
        <div>
            <p>{name}:{number}</p>
            <button onClick={add}>+</button>
            <button onClick={minus}>-</button>
            <button onClick={asyncAdd}>async +</button>
        </div>
    );
}

export default App; // 导出 App 组件作为默认导出

8.2 react.js #

src\zustand\react.js

// 导入 createStore 函数
import { createStore } from './vanilla';
// 导入 useSyncExternalStore 函数
+import { useSyncExternalStore, useRef, useCallback } from 'react';
// 定义 useStore 函数,接收 api 对象作为参数
+export function useStore(api, selector) {
+    const lastSnapshotRef = useRef(null);
+    const lastSelectionRef = useRef(null);
+    const getSelection = useCallback(() => {
+        let lastSelection = lastSelectionRef.current;
+        if (lastSelection === null) {
+            const nextSnapShot = api.getState();
+            lastSelection = selector(nextSnapShot);
+            lastSnapshotRef.current = nextSnapShot;
+            lastSelectionRef.current = lastSelection;
+            return lastSelection;
+        }
+        const lastSnapshot = lastSnapshotRef.current;
+        const nextSnapShot = api.getState();
+        if (Object.is(lastSnapshot, nextSnapShot)) {
+            return lastSelection;
+        }
+        const nextSelection = selector(nextSnapShot);
+        lastSnapshotRef.current = nextSnapShot;
+        lastSelectionRef.current = nextSelection;
+        return nextSelection;
+    }, []);
    // 使用 useSyncExternalStore 函数从 api 中获取状态值
+    let value = useSyncExternalStore(api.subscribe, getSelection);
    return value;
}

// 定义 createImpl 函数,接收 createState 函数作为参数
const createImpl = createState => {
    // 调用 createStore 函数创建状态管理器
    const api = createStore(createState);
    // 返回一个函数,该函数将 api 对象传递给 useStore 函数
+    return (getSelection) => useStore(api, getSelection)
}

// 定义 create 函数,接收 createState 函数作为参数,返回 createImpl 函数的调用结果
export const create = createState => createImpl(createState);

// 默认导出 create 函数
export default create;

9. Persist中间件 #

9.1 src\App.js #

src\App.js

import { create } from './zustand'; // 导入 create 函数从 './zustand' 模块中
import logger from './zustand/middleware/logger'; // 导入 logger 中间件从 './zustand/middleware/logger' 模块中
+import { persist, createJSONStorage } from './zustand/middleware/persist'
// 创建一个名为 useStore 的状态钩子
// 该状态钩子使用 logger 中间件
// 该状态钩子的状态有 number, name, add, minus, asyncAdd 五个属性
+const useStore = create(persist((set) => {
    return {
        number: 0,
        name: 'Number',
        add: () => set(state => ({ number: state.number + 1 })),
        minus: () => set(state => ({ number: state.number - 1 })),
        asyncAdd: () => {
            setTimeout(() => {
                set(state => ({ number: state.number + 1 }));
            }, 1000);
        }
    }
+}, {
+    name: 'counter', // unique name
+    storage: createJSONStorage(sessionStorage)
+}));
// 定义一个函数组件 App
// 该组件使用 useStore 状态钩子,解构出其状态对象的 number、name、add、minus 和 asyncAdd 属性
// 在组件渲染时展示 number 和 name 属性值,并提供三个按钮:add、minus 和 asyncAdd,分别调用对应的函数
function App() {
    const { number, name, add, minus, asyncAdd } = useStore(state => (
        {
            number: state.number,
            name: state.name,
            add: state.add,
            minus: state.minus,
            asyncAdd: state.asyncAdd
        }));
    return (
        <div>
            <p>{name}:{number}</p>
            <button onClick={add}>+</button>
            <button onClick={minus}>-</button>
            <button onClick={asyncAdd}>async +</button>
        </div>
    );
}

export default App; // 导出 App 组件作为默认导出

9.2 persist.js #

src\zustand\middleware\persist.js

export function createJSONStorage(storage) {
    const persistStorage = {
        getItem: name => {
            const str = storage.getItem(name);
            return str ? JSON.parse(str) : {};
        },
        setItem: (name, newValue) => storage.setItem(name, JSON.stringify(newValue)),
    };
    return persistStorage;
}

export const persist = (createState, { name, storage }) => {
    return (set, get, api) => {
        const result = createState((...args) => {
            set(...args);
            storage.setItem(name, get())
        }, get, api);
        queueMicrotask(() => {
            set(storage.getItem(name))
        });
        return result;
    };
};

10. immer中间件 #

10.1 src\App.js #

src\App.js

import { create } from './zustand'; // 导入 create 函数从 './zustand' 模块中
import logger from './zustand/middleware/logger'; // 导入 logger 中间件从 './zustand/middleware/logger' 模块中
import { persist, createJSONStorage } from './zustand/middleware/persist'
+import { immer } from './zustand/middleware/immer'
// 创建一个名为 useStore 的状态钩子
// 该状态钩子使用 logger 中间件
// 该状态钩子的状态有 number, name, add, minus, asyncAdd 五个属性
+const useStore = create(immer((set) => {
    return {
        number: 0,
        name: 'Number',
+        add: () => set(state => { state.number += 1 }),
+        minus: () => set(state => { state.number -= 1 }),
        asyncAdd: () => {
            setTimeout(() => {
                set(state => ({ number: state.number + 1 }));
            }, 1000);
        }
    }
}));
// 定义一个函数组件 App
// 该组件使用 useStore 状态钩子,解构出其状态对象的 number、name、add、minus 和 asyncAdd 属性
// 在组件渲染时展示 number 和 name 属性值,并提供三个按钮:add、minus 和 asyncAdd,分别调用对应的函数
function App() {
    const { number, name, add, minus, asyncAdd } = useStore(state => (
        {
            number: state.number,
            name: state.name,
            add: state.add,
            minus: state.minus,
            asyncAdd: state.asyncAdd
        }));
    return (
        <div>
            <p>{name}:{number}</p>
            <button onClick={add}>+</button>
            <button onClick={minus}>-</button>
            <button onClick={asyncAdd}>async +</button>
        </div>
    );
}
export default App; // 导出 App 组件作为默认导出

10.2 immer.js #

src\zustand\middleware\immer.js

import { produce } from 'immer';
const immer = (initializer) => (set, get, store) => {
    store.setState = (updater) => {
        const nextState = produce(updater);
        return set(nextState);
    };
    return initializer(store.setState, get, store);
};
export { immer };