@savage181855/react-store NPM

React-store

简单、高效的React全局状态管理器

特点

轻量
优雅
高性能
灵活
渐进式
模块化

功能

按需渲染
计算属性
监听器
智能提示

安装

npm install @savage181855/react-store -S

注意：第三方镜像同步不及时，一定记得使用官方镜像！！！

兼容性

项目使用了 ES6 的proxy，仅支持主流浏览器，查看详情。

快速使用

定义个useStorehook 并导出

import { defineStore } from "@savage181855/react-store";

export const useStore = defineStore({
  state: {
    count: 0,
    name: "savage",
  },
  actions: {
    increment() {
      this.count += 1;
      this.name = "hell";
    },
    changeName() {
      this.name = "foo";
    },
  },
  computed: {
    dbCount(): number {
      console.debug("dbCount just execute once");
      return this.count * 2;
    },
    three(state): number {
      console.debug("can access the state");
      return this.dbCount * 3;
    },
  },
});

在Counter组件里导入使用

import { memo } from "react";

import { useStore } from "../store";

export function Count() {
  console.debug("count rendered");

  const store = useStore();

  const { count, name, increment, changeName } = store;

  store.useWatcher("count", (oldV, value) => {
    console.debug("watch", oldV, value);
  });

  function changeName2() {
    // pass the object
    store.patch({ name: "bar" });
  }

  function changeName3() {
    // pass the function
    store.patch((state) => (state.name = "shit"));
  }
  return (
    <div>
      <h1>I'm the counter</h1>
      <div>number：{count}</div>
      <div>
        <button onClick={() => increment()}> +1</button>
      </div>
      <h3>{name}</h3>

      {/* use the computed property */}
      <div>{store.dbCount}</div>
      <button onClick={() => changeName()}>changeName</button>
      <button onClick={() => changeName2()}>changeName2</button>
      <button onClick={() => changeName3()}>changeName3</button>
    </div>
  );
}

export default memo(Count);