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
1

示例

定义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 })),
}));

1
2
3
4
5
6
7
8
9
10
11

使用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 />
    </>
  );
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28