@tarocch1/use-store

UseStore

一个基于 React Hooks 的状态管理工具。

Install

npm install @tarocch1/use-store

Usage

import { Provider, useStore, defineStore } from '@tarocch1/use-store';

const countStore = defineStore({
  state: {
    count: 0,
  },
  action: {
    plus: () => ({ getState, setState }) => {
      const { count } = getState('countStore');
      setState({ count: count + 1 });
    },
    plusAsync: () => async ({ getState, setState }) => {
      await new Promise(resolve => setTimeout(resolve, 1000));
      const { count } = getState('countStore');
      setState({ count: count + 1 });
    },
    plusSomething: num => ({ getState, setState }) => {
      const { count } = getState('countStore');
      setState({ count: count + num });
    },
  },
});

function Counter() {
  const [countState, countAction] = useStore('countStore');
  return (
    <>
      <p>Count: {countState.count}</p>
      <button onClick={countAction.plus}>+</button>
      <button onClick={countAction.plusAsync}>+ async</button>
      <button onClick={() => countAction.plusSomething(2)}>+2</button>
    </>
  );
}

ReactDOM.render(
  <Provider store={{ countStore }}>
    <Counter />
  </Provider>,
  container,
);