介绍

说明

think-react-store 基于 react hooks 和 context api 实现的类似的 redux 的轻量级数据管理工具。支持数据存储，方法调用，可以在 class 组件和 function 组件中使用，支持同步和异步的方法调用。

GitHub 仓库地址

安装

// npm
npm i --save think-react-store

// yarn
yarn add think-react-store

api 介绍

api	作用	适合场景
StoreProvider	全局用的 provider	app.js 或者单个模块的根文件
StoreContext	存储用的 Context	function 组件和 class 组件均适用
useStoreHook	store 钩子函数，包含state和dispatch	function 组件
useStateHook	获取 state 用的 hook	function 组件
useDispatchHook	进行事件派发的 hook	function 组件
connect	添加属性和方法到组件中	function/class 组件

备注：

• 参数 key 指的是，各个 context 导出时候对应的值，例如 export { default as user } from './user'，那么 key 就是 user
• 如果报语法错误，在检查原因后安装 babel 相关插件，例如 @babel/preset-react；另外建议不用 @babel/preset-env，因为 preset-env 会在运行时将 async/await 等进行转译；如果一定要使用，可以配置 targets 属性，类似这样子

"presets": [
  ["@babel/preset-env", {
    "targets": {
      "chrome": "70"
    },
    useBuiltIns: "usage"
  }],
  "@babel/preset-react"
],