跳转到主文档

createApp

补充信息

用于创建局部状态,将不同 Model App 间状态隔离。

import { createApp } from '@modern-js/runtime/model';
注意
  • 注意 @modern-js/runtime/model 中导出的 createApp 用于管理状态,而 @modern-js/runtime 导出的 createApp 用于管理更下层的运行时,两者功能不同。

API

createApp(config) => object

参数

  • config:Record<string, any>
    • [models]:在 App 入口中统一注册 models。(正常使用无需提前注册)
    • [initialState]:用于设置全局 store 的初始状态。(一般用于 SSR,初始化数据)
    • [plugins]:注入插件,可注入的插件有(router、immer、auto-action、machine 等)。
    • [enhancers]:Redux createStore API enhancer 配置,详见介绍

返回值

  • Provider:React.ComponentType<any>,React 组件,提供局部 React Context 环境。
  • useModel:function,获取 ModelReact Hook 函数,详见 useModel
  • useStaticModel:function,获取 ModelReact Hook 函数,详见 useStaticModel

示例

通过 createApp 可以创建局部状态,将不同 Model App 间状态隔离。

import { createApp, model } from '@modern-js/runtime/model';
import autoActions from '@modern-js-reduck/plugin-auto-actions';
import { fooModel } from '@/common/models';

const { Provider: LocalFooProvider, useModel: useLocalFooModel} = createApp({
plugins: [autoActions()]
});
const { Provider: LocalBarProvider, useModel: useLocalBarModel} = createApp({
plugins: [autoActions()]
});

function Foo() {
const [fooState] = useLocalFooModel(fooModel);
const [barState] = useLocalBarModel(fooModel);

return <div>
<div>Foo: {fooState}</div>
<div>Bar: {barState}</div>
</div>
}

function Container() {
return <LocalFooProvider>
<LocalBarProvider>
<Foo />
</LocalBarProvider>
</LocalFooProvider>
}