react-tiny-state: 100行代码实现的一个状态管理

React生态里，类似于 pinia 的状态管理

项目主页: https://github.com/afeiship/react-tiny-state

安装

yarn add @jswork/scan-modules @jswork/react-tiny-state

Stores

src/shared/stores on 🌱 master via 🐠 v16.20.0
$ tree
.
└── app.ts

一个示例的 app.ts

export default nx.$defineStore({
  name: "app",
  state: {
    rawTrends: [],
    rawStat: {},
  },
  watch: {},
  actions: {},
});

添加 provider

只展示基本代码，此项目基于 webpack 开发的。

const storeCtx = require.context('./shared/stores', true, /\.ts$/);
const stores = scanWebpack(storeCtx, { modules: '/stores/' });

function App() {
  return (
    <ReactTinyState store={stores}>
      <WrapedApp />
    </ReactTinyState>
  );
}

参考

• https://github.com/lukashala/react-simply