跳到主要内容

API 参考

Store 创建​

createStore​

创建store实例

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

Store 实例方法​

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

getAllStates​

获取所有state

store.getAllStates();

React 集成​

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