@cdd-team/zustand (英语)

Учебный 苏斯坦德 для @cdd-team/react。 。 。 .

npm: https://www.npmjs.com/package/@cdd-team/zustand 互联网档案馆的存檔,存档日期2013-12-02

Установка

bun add @cdd-team/zustand @cdd-team/react

反应

import { create, useShallow } from "@cdd-team/zustand";

type CounterState = {
    count: number;
    step: number;
    inc: () => void;
};

const useCounter = create<CounterState>()((set) => ({
    count: 0,
    step: 1,
    inc: () => set((state) => ({ count: state.count + state.step })),
}));

function Counter() {
    // Перерисовка только при изменении count
    const count = useCounter((state) => state.count);
    const inc = useCounter((state) => state.inc);
    return <button onClick={inc}>{count}</button>;
}

function Summary() {
    // Селектор возвращает новый объект: сравниваем поверхностно
    const { count, step } = useCounter(useShallow((state) => ({ count: state.count, step: state.step })));
    return <p>{count} / {step}</p>;
}

Хук useCounter 说吧 useCounter.getState(), (中文(简体) ), useCounter.setState(...), (中文(简体) ), useCounter.subscribe(...)Для,созданного也 createStore时 useStore(store, selector?)。 。 。 .

QQ 反应

Точка /vanilla 反应.

import { createStore } from "@cdd-team/zustand/vanilla";

const store = createStore<{ count: number }>()(() => ({ count: 0 }));

const unsubscribe = store.subscribe((state, prevState) => {
    console.log(prevState.count, "→", state.count);
});

store.setState({ count: 1 }); // поверхностное слияние
store.setState((state) => ({ count: state.count + 1 }));
store.setState(store.getInitialState(), true); // полная замена
unsubscribe();

API 密码

苏斯坦

• {\fn黑体\fs22\bord1\shad0\3aHBE\4aH00\fscx67\fscy66\2cHFFFFFF\3cH808080}你觉得呢 useState + 键 useLayoutEffect时 useSyncExternalStore。 。 .
• * * * 中间件(persist, (中文(简体) ), devtools, (中文(简体) ), immer? ? \ \ \ \ 背景 .

Разработка

bun install
bun run test       # vanilla без DOM + хуки на happy-dom
bun run typecheck
bun run lint
bun run build