js：react使用zustand实现状态管理

文档

• https://www.npmjs.com/package/zustand
• https://github.com/pmndrs/zustand
• https://docs.pmnd.rs/zustand/getting-started/introduction

安装

npm install zustand

示例

定义store
store/index.js

import { create } from "zustand";export const useCountStore = create((set) => ({// statecount: 0,// actionincrement: () => set((state) => ({ count: state.count + 1 })),decrement: () => set((state) => ({ count: state.count - 1 })),
}));

使用store

app.jsx

import React, { useState, useEffect } from "react";
import { useCountStore } from "./store/index.js";function FooCounter() {const count = useCountStore((state) => state.count);return <h1>count: {count}</h1>;
}function BarCounter() {const increment = useCountStore((state) => state.increment);const decrement = useCountStore((state) => state.decrement);return (<><button onClick={increment}>increment</button><button onClick={decrement}>decrement</button></>);
}export default function App() {return (<><FooCounter /><BarCounter /></>);
}