---
sidebar_position: 11
title: createApp
---
# createApp

import ReduckTip from "@site-docs-en/components/reduck-tip"

<ReduckTip />

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

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

function createApp(config: AppConfig): object;
```

### Input

- `config`
  - `StoreConfig`: the same as [`createStore`](./create-store.mdx) params.
  - `devTools`: the default value is `true`. when it is an object type, configuring [Options](https://github.com/reduxjs/redux-devtools/blob/main/extension/docs/API/Arguments.md) of Redux DevTools.
  - `autoActions`: the default value is `true`.if [auto generate Actions](./auto-actions.mdx).

### Return Value

Reduck App, consists of the following properties:

- `Provider`: inject shared Store into locally component tree, same as [`Provider`](./Provider.mdx).
- `useModel`: get the Model mounted by the app's local Store, same as [`useModel`](./use-model.mdx).
- `useStaticModel`: get the Model mounted by the app's local Store. same as [`useStaticModel`](./use-static-model.mdx).
- `useLocalModel`: get the Model mounted by the app's local Store. same as [`useLocalModel`](./use-local-model.mdx).
- `useStore`: get the Store used locally by the app. same as [`useStore`](./use-store.mdx).

## Example

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

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