Skip to main content

API Reference

Store Creation​

createStore​

createStore(
  modules?: Modules,
  lazyModules: LazyStoreModules,
  options?: {
    middlewares?: Middleware[],
    interceptors?: Interceptor[],
  }
) => Store;

Store Instance Methods​

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 module

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: Array<string|RegExp>;
  include: Array<string|RegExp>,
})

get all states​

store.getAllStates();

React Integration​

createUseInject 2.2.0+​

const useInject = createUseInject(() => Store);
const useFlatInject = createUseInject(() => Store, {flat: true});


/**
 * within react component
 */
const [moduleA] = useInject('moduleA');

/**
 * useFlatInject is different 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> }>