# 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> }>

Last Updated: 2/25/2023, 10:58:31 PM