# api
# createStore
createStore(
modules?: Modules,
lazyModules: LazyStoreModules,
options?: {
middlewares?: Middleware[],
interceptors?: Interceptor[],
}
) => Store;
# store api
# NaturContext 2.2.0+
import {Provider} from 'natur';
function App() {
return (
// this store will be apply first in inject/useInject/useStore
<Provider store={store}>
{ /* other code */ }
</Provider>
)
}
# createUseStore 2.2.0+
const useStore = createUseStore(() => store);
// within component
// You get the store in the Context first
const store = useStore();
// within component
# getModule
store.getModule('moduleName') => InjectStoreModule
# setModule
store.setModule('moduleName', StoreModule) => Store;
# removeModule
store.removeModule('moduleName') => Store;
# setLazyModule
init/set lazy module
store.setLazyModule('moduleName', () => Promise<StoreModule>) => Store;
# removeLazyModule
remove lazy modul
store.removeLazyModule('moduleName') => Store;
# hasModule
store.hasModule('moduleName') => boolean;
# loadModule
load lazy module If the module is already loaded, return the already loaded module
store.loadModule('moduleName') => Promise<InjectStoreModule>;
# getOriginModule
store.getOriginModule('moduleName') => StoreModule;
# getLazyModule
getLazyModule import function
store.getLazyModule('moduleName') => () => Promise<StoreModule>;
# subscribe
listen module change
export type ModuleEvent = {
type: 'init' | 'update' | 'remove',
actionName?: string,
};
export interface Listener {
(me: ModuleEvent): any;
}
store.subscribe('moduleName', listener: Listener) => Function;
# subscribeAll 2.2.0+
listen all module change
export type ModuleEvent = {
type: 'init' | 'update' | 'remove',
actionName?: string,
moduleName: string,
};
export interface AllListener {
(me: ModuleEvent): any;
}
store.subscribeAll(listener: AllListener) => Function;
# getAllModuleName
store.getAllModuleName('moduleName') => string[];
# dispatch
run action
store.dispatch(moduleName, actionName, ...actionArg: any[]) => ReturnType<Action>;
# destroy store
store.destroy() => void;
# globalSetStates
// Manually set all state, incoming module name, and corresponding state, it will be updated, and push notification
store.globalSetStates({
[mn: moduleName]: State;
})
# globalResetStates
// Use store to initialize the state of all modules and push notifications
// You can pass, exclude, include to filter modules that do not need to be initialized, exclude is higher than include
store.globalResetStates({
exclude: Arrary<string|RegExp>;
include: Arrary<string|RegExp>,
})
# get all states
store.getAllStates();
# inject api
# createUseInject 2.2.0+
const useInject = createUseInject(() => Store);
const useFlatInject = createUseInject(() => Store, {flat: true});
/**
* within react component
*/
const [moduleA] = useInject('moduleA');
/**
* useFlatInject is diffrent from useInject
* members in state/maps/actions of moduleA are been merged into a whole object, this object is flatModuleA below.
*/
const [flatModuleA] = useFlatInject('moduleA');
/**
* if you want listen partial state of a module
* it is like inject
*/
const [moduleB] = useInject('moduleB', {
state: ['b', s => s.xxx], // only changes to b and xxx properties in state will trigger an update
maps: ['aaa'] // only changes to the aaa property in maps will trigger an update!
});
# createInject
import { createStore, createInject } from 'natur';
const store = createStore({count}, {});
const inject = createInject({storeGetter: () => store});
// create an injector of count module
const injector = inject('count');
// declare props type
const App = ({count}: typeof injector.type) => {
return (
<>
<button onClick={() => count.actions.dec(count.state.number)}>-</button>
<span>{count.state.number}</span>
<button onClick={() => count.actions.inc(count.state.number)}>+</button>
<span>{count.maps.isEven}</span>
</>
)
};
// inject count module into App component by injector
const IApp = injector(App);
// render injected component
ReactDOM.render(<IApp />, document.querySelector('#app'));
# inject
type ModuleDepDec = [string, {
state?: Array<string|Function>;
maps?: Array<string>;
}]
type TReactComponent<P> = React.FC<P> | React.ComponentClass<P>;
type StoreProps = {[m: string]: InjectStoreModule}
inject<T extends StoreProps>(...moduleDec: Array<string|ModuleDepDec>)
=> <P extends T>(
WrappedComponent: TReactComponent<P>,
LoadingComponent?: TReactComponent<{}>
) => React.ComponentClass<Omit<P, keyof T> & { forwardedRef?: React.Ref<any> }>