English | 简体ä¸ć–‡
A React state management library Based on Hooks which inspired by stamen
- Perfect Typescript support
- API and structure similar to dva
- Tiny
npm install --save cube-state
# Or
yarn add cube-statefirst 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 };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: {}
});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>
);
}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>
}use redux devtools to watch data change detail
import devtools from 'cube-state/dist/plugin/dev-tool';
devtools({ storeMap, use });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 getState instead of useStore if you don't want to rerender component when store changed;
getStateis not Hook, you can use it anywhere.
import counterStore from "stores/counter";
export function doubleCount() {
return 2 * counterStore.getState(s => s.count);
}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.
Two ways:
- wrap class component by functional component.
- 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)use selector to pick the data you want to subscribe precisely.
const [count, deepValue] = someStore.useStore(s => [s.count, s.a.deepValue]);