# api

# createStore

创建store实例

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

# store api

# NaturContext 2.2.0+

import {Provider} from 'natur';

function App() {
  return (
    // 这个store将被优先应用在 inject/useInject/useStore等API中
    <Provider store={store}>
      { /* other code */ }
    </Provider>
  )
}

# createUseStore 2.2.0+


const useStore = createUseStore(() => store);

// 在某个组件内
// 优先从Context中获取store
const store = useStore();
// 在某个组件内

# getModule

获取模块

store.getModule('moduleName') => InjectStoreModule

# setModule

初始化/设置模块

store.setModule('moduleName', StoreModule) => Store;

# removeModule

移除模块

store.removeModule('moduleName') => Store;

# setLazyModule

初始化/设置懒加载模块

store.setLazyModule('moduleName', () => Promise<StoreModule>) => Store;

# removeLazyModule

移除懒加载模块

store.removeLazyModule('moduleName') => Store;

# hasModule

判断当前已加载模块中是否存在某模块

store.hasModule('moduleName') => boolean;

# loadModule

加载某懒加载模块, 如果该模块已经加载则返回已经加载的模块

store.loadModule('moduleName') => Promise<InjectStoreModule>;

# getOriginModule

获取未包装的模块

store.getOriginModule('moduleName') => StoreModule;

# getLazyModule

获取懒加载模块的加载函数

store.getLazyModule('moduleName') => () => Promise<StoreModule>;

# subscribe

订阅/监听模块

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+

订阅/监听所有模块

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

执行action

store.dispatch(moduleName, actionName, ...actionArg: any[]) => ReturnType<Action>;

# destroy

销毁store

store.destroy() => void;

# globalSetStates

全局设置state

// 手动设置所有的state,传入模块名,以及对应的state,则会更新,并推送通知
store.globalSetStates({
  [mn: moduleName]: State;
})

# globalResetStates

全局初始化state

// 使用store初始化所有模块的state,并推送通知
// 可以通过,exclude,include过滤不需要初始化的模块, exclude优先级高于include
store.globalResetStates({
  exclude: Arrary<string|RegExp>;
  include: Arrary<string|RegExp>,
})

# getAllStates

获取所有state

store.getAllStates();

# inject api

# createUseInject 2.2.0+

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

/**
 * 在组件内部
 */
const moduleA = useInject('moduleA');
/**
 * useFlatInject与useInject有所不同
 * moduleA中的属性state/maps/actions的元素将会被放到同一个大的对象中,变成flatModuleA
 */
const [flatModuleA] = useFlatInject('moduleA');

/**
 * 如果你想监听模块的部分状态,用法类似inject
 */
const moduleB = useInject('moduleB', {
  state: ['b', s => s.xxx], // 只有state中的b、xxx变动才会触发更新
  maps: ['aaa'] // 只有maps中的aaa属性变动才会触发更新
});

# createInject

import { createStore, createInject } from 'natur';

const store = createStore({moduleA}, {});
const inject = createInject({storeGetter: () => store});

// 创建一个moduleA模块的注入器
const injector = inject('moduleA');

// 声明props类型
const App = ({moduleA}: typeof injector.type) => {
  return (
    <></>
  )
};

// 使用注入器向组件中注入count
const IApp = injector(App);

// 渲染注入后的组件
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(...moduleDec: Array<string|ModuleDepDec>) 
=> <P extends T>(
  WrappedComponent: TReactComponent<P>, 
  LoadingComponent?: TReactComponent<{}>
) => React.ComponentClass<Omit<P, keyof T> & { forwardedRef?: React.Ref<any> }>

最后更新: 2023/2/25 22:58:31