createApp

information

By default, the export package name for all APIs in this section is: @modern-js/runtime/model.

If Reduck is integrated separately from Modern.js, the export package name is: @modern-js-reduck/react.

Reduck will call createApp to create a global application by default. If the entire application only needs one Store, then there is no need to call createApp manually.Only need to use createApp when you need to create a Store locally in the app.

CAUTION

Note that the exported createApp in @modern-js/runtime/model is used to manage state, while the exported createApp in @modern-js/runtime is used to create the entire application. The two are differently.

Function Signature

interface AppConfig extends StoreConfig {
  devTools?: boolean | DevToolsOptions;
  autoActions?: boolean;
}

function createApp(config: AppConfig): object;

Input

  • config
    • StoreConfig: the same as createStore params.
    • devTools: the default value is true. when it is an object type, configuring Options of Redux DevTools.
    • autoActions: the default value is true.if auto generate Actions.

Return Value

Reduck App, consists of the following properties:

  • Provider: inject shared Store into locally component tree, same as Provider.
  • useModel: get the Model mounted by the app's local Store, same as useModel.
  • useStaticModel: get the Model mounted by the app's local Store. same as useStaticModel.
  • useLocalModel: get the Model mounted by the app's local Store. same as useLocalModel.
  • useStore: get the Store used locally by the app. same as useStore.

Example

use createApp, local states can be created to isolate the states between different Reduck applications.

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

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