当前位置：首页 > article >正文

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

article 2024/11/15 8:52:34

文档

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) => ({
  // state
  count: 0,

  // action
  increment: () => 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 />
    </>
  );
}