himawari: 基于React Hooks Api的响应式 React 状态管理库

himawari 提供了什么

himawari最大的作用,就是让我们忘记繁杂的 api 文档,抛弃冗余的模板代码.只需要简单的3个 API,就能完成redux + mobx的功能.同时himawari由typescript编写,提供完整全面的类型推倒,让低级错误从此远离项目.

设计理念

himawari参考了redux和mobx的各自的一些理念和功能.和redux一样,himawari采用单store设计,但是himawari内部的数据和mobx一样全部是响应式的,在数据发生变动时,针对性的去刷新 UI,从而达到简洁且高效的目的.

API

• createStore

  createStore({ namespace: "test", ...initStore });

  作为创建store的 api,唯一的必填入参是全局唯一的namespace,除此之外,你可以传入任何类型的值.himawari内部维护着一个唯一store实例,每一个createStore方法调用后都会向实例中新增一个对象.

• useStore 这个 API 使用了react hooks,所以请确保你的项目依赖的react版本大于 16.8.6,并且只可以在函数组件中调用它.方法会返回Store实例.当你修改他内部的值时,页面会自动重新渲染.

• connect 对于类组件,无法使用useStore,那么可以使用connect方法,通过高阶组件的形式,包裹这个类组件.connect只有一个入参mapState(store => f(store)),作用和react-redux中的connect类似,但是需要注意的有三点:

  1. 不可以为null
  2. 返回值中不可以包含store对象. 因为store对象的获取源于useStore这个方法,这个hook只能在函数组件中调用.
  3. mapState的结果将放在this.props.$store中.

• getStore 如果想在Component以外的地方获取store中的数据(不需要刷新 UI),直接const store = getStore<T>()即可.需要注意的是,修改store中的数据,也会刷新订阅了这些数据的组件.

TODO

1. 补充测试文件
2. 增加 chrome 插件,在开发环境中直接查看/修改stores状态
3. 优化&&修 bug

issues & PR

如果你对这个项目有任务的建议/想法,欢迎提 issue 或者发邮件给我([email protected]).

如果你想参与这个项目,欢迎提 pr.

如果你对这个项目感兴趣,不妨给个 star 鼓励一下.

蟹蟹,happy coding~~~