@mohism/data-hub v1.0.7

Rito Data-hub

一个自己够用的 遵循react-hooks API的全局状态管理

Install

npm i @mohism/data-hub

Usage

/src/index.tsx

  import React from 'react';
  import ReactDOM from 'react-dom';
  import './index.css';
  import App from './App';
  import * as serviceWorker from './serviceWorker';
  import { createStore } from '@mohism/data-hub';

  /*
  interface IStateful<T> {
    name: string
    initState: T
    reducer: ReducerFn<T>
  }
  */
  // 接受一个实现了 IStateful 接口的对象
  createStore({
    name: 'counter',
    initState: 0,
    reducer:/* 遵循 redux 约定的reducer方法 */
  });

  ReactDOM.render((
    <App />
  ), document.getElementById('root'));

  serviceWorker.unregister();

在 Counter 组件里使用这个状态

  import { useStore } from '@mohism/data-hub';
  export default () => {
    // 目前只支持使用名字获取全局状态 
    const [count, dispatch] = useStore<number>('counter');
    return (
      <>
        <p>{count}</p>
        <button
          onClick={()=>dispatch({
            type: 'ADD_ONE_SECOND'
          })}
        > 
          +1s 
        </button>
      </>
    );
  }