define and consume state
Define state:
ts
import { create } from "zustand";
const useUserStore = create(() => ({
firstName: "Ilence",
}));Consume state:
tsx
function Header() {
const firstName = useUserStore((state) => state.firstName);
return (
<header>
<h1>{firstName}</h1>
</header>
);
}update state
ts
// ...
type State = {
firstName: string;
};
type Action = {
updateFirstName: (firstName: State["firstName"]) => void;
};
const useUserStore = create<State & Action>((set) => ({
// ...
updateFirstName: (firstName) => set(() => ({ firstName })),
}));
tsx
function Profile() {
const firstName = useUserStore((state) => state.firstName);
const updateFirstName = useUserStore((state) => state.updateFirstName);
return (
<div>
<label>
First name
<input
type="text"
value={firstName}
onChange={(e) => updateFirstName(e.target.value)}
/>
</label>
</div>
);
}