reactjs - 为什么我总是需要使用 Zusand(React-Redux 状态管理工具) Store 返回一些 html？

Question

为什么“inc”按钮不起作用，但其他按钮起作用？我是否遗漏了什么，或者这就是 Zusand Store 应该工作的方式？

我要渲染的页面

import React from "react";
// import store from "./store";
import { useStore } from "./zustandStore/store";

export default function App() {
  const AddAModel = () => {
    const inc = useStore((state) => state.bears);
    console.log(inc);
  };

  function BearCounter() {
    const bears = useStore((state) => state.bears);
    return <h1>{bears} around here ...</h1>;
  }

  function Controls() {
    const increasePopulation = useStore((state) => state.increasePopulation);
    return <button onClick={increasePopulation}>one up</button>;
  }

  return (
    <div>
      APP
      <div>
        <button onCLick={AddAModel}>inc</button>
        {Controls()}
        {BearCounter()}
      </div>
    </div>
  );
}

商店

import create from "zustand";
import { devtools } from "zustand/middleware";

let store = (set) => ({
  bears: 0,
  increasePopulation: () => set((state) => ({ bears: state.bears + 1 })),
  removeAllBears: () => set({ bears: 0 }),
});

store = devtools(store);

export const useStore = create(store);

这是 Zusand 状态管理工具的链接： https ://github.com/pmndrs/zustand

标签： reactjsreact-reduxzustand