Skip to content

A tiny state management library based on React Hook which similar to dva

License

Notifications You must be signed in to change notification settings

daskyrk/cube-state

Folders and files

NameName
Last commit message
Last commit date
Apr 23, 2021
Feb 26, 2022
Aug 27, 2021
Oct 3, 2019
Feb 26, 2022
Oct 10, 2021
Oct 3, 2019
Feb 26, 2022
Feb 26, 2022
Feb 26, 2022
Feb 29, 2020
Jul 11, 2022
Feb 26, 2022
Jun 3, 2020
Oct 3, 2019
Oct 26, 2020

Repository files navigation

English | 简体中文

cube-state

A React state management library Based on Hooks which inspired by stamen

npm version React Types Include Bundle Size codecov

architecture

Features

  • Perfect Typescript support
  • API and structure similar to dva
  • Tiny

Try It Online

Edit

Install

npm install --save cube-state
# Or
yarn add cube-state

Quick Start

Init

first of all, do some init job, like extend effect or patch every store when created. you can see the Advanced Usages.

init-cube.ts

import init from "cube-state";

const { createStore, createFlatStore, storeMap, use } = init();

export { createStore, createFlatStore, storeMap, use };

Create store

Pass a plain config to createStore and get a wrapped store object. or use createFlatStore to flatten reducers and effects to store object.

stores/counter.ts

import { createStore } from "init-cube";

export default createStore({
  name: "count",
  state: {
    count: 0
  },
  reducers: {
    add(state, num: number) {
      state.count += num;
    }
  },
  effects: {}
});

Use store

Call useStore to watch selected data change and re-render.

import counterStore from "stores/counter";

function App(props) {
  const value = counterStore.useStore(s => s.count);
  return (
    <div>
      <p>{value}</p>
      <button onClick={() => counterStore.reducers.add(1)}>Increment</button>
    </div>
  );
}

Plugin

loading

use loading plugin to toggle loading status

import loadingStore from 'cube-state/dist/plugin/loading';
import userStore from 'stores/user';

function MsgList() {
  const { getMsgList } = userStore.effects;
  const [effectALoading] = loadingStore.useLoading(userStore, ['effectA']);

  React.useEffect(() => {
    getMsgList();
  }, []);

  return <Spin loading={effectALoading}><div>msg list</div><Spin>
}

devtools(deprecated)

use redux devtools to watch data change detail

import devtools from 'cube-state/dist/plugin/dev-tool';

devtools({ storeMap, use });

Advanced Usages

Pass initial config

import init from "cube-state";

const cube = init({
  extendEffect({ storeMap, update }) {
    // extend effect first argument
  },
  onCreate(store) {
    // do some job after store is created
  }
});

Use data without subscribe change

use getState instead of useStore if you don't want to rerender component when store changed;

getState is not Hook, you can use it anywhere.

import counterStore from "stores/counter";

export function doubleCount() {
  return 2 * counterStore.getState(s => s.count);
}

Singleton mode

Pass singleton: true to init options will enable singleton mode, which will return the last created store instance with the same name. If the store file will be execute multiple times, eg. in module federation, it would be useful.

Use in class components

Two ways:

  1. wrap class component by functional component.
  2. if you want to reuse connect logic, please use connectCube.
import counterStore from "stores/counter";

interface IProps {
  value: typeof counterStore.stateType.value;
  add: typeof counterStore.reducers.add;
}
class Counter extends Component<IProps> {
  render() {
    const { value, add } = this.props;

    return (
      <div>
        <p>{value}</p>
        <button onClick={() => add()}>Increment</button>
      </div>
    );
  }
}

// first way
export default () => {
  const value = counterStore.useStore(s => s.count);
  return <Counter value={value} add={counterStore.reducers.add} />;
};

// second way
type IMapper<P, M> = {
  (props: Omit<P, keyof M>): M
};

interface IConnectComp<P> {
  (p: P): JSX.Element
}

export function connectCube<P, M>(Comp: IConnectComp<P> | React.ComponentType<P>, mapper: IMapper<P, M>) {
  return (props: Omit<P, keyof M>) => {
    const storeProps = mapper(props);
    const combinedProps = { ...props, ...storeProps } as any;
    return <Comp {...combinedProps} />;
  };
}

const Mapper = () => {
  const value = counterStore.useStore(s => s.count);
  const { add } = counterStore.reducers;
  return {
    value,
    add,
  };
};

connectCube(Counter, Mapper)

Performance optimization

use selector to pick the data you want to subscribe precisely.

const [count, deepValue] = someStore.useStore(s => [s.count, s.a.deepValue]);