@modern-js/main-doc 2.0.0-beta.0 → 2.0.0-beta.1

package/zh/apis/app/runtime/core/create-app.md

@@ -0,0 +1,47 @@
+---
+title: createApp
+---
+
+用于创建自定义入口，定制运行时插件。只有在使用[自定义入口](/docs/guides/advanced-features/custom-app)时，才需要使用该 API。
+
+## 使用姿势
+
+```ts
+import { createApp } from '@modern-js/runtime';
+```
+
+## 函数签名
+
+```ts
+import type { Plugin } from '@modern-js/runtime';
+
+function createApp(options: { plugins: Plugin[] }): React.ComponentType<any>;
+```
+
+### 参数
+
+- `options`: 可选的参数。
+  - `plugins`：自定义的插件扩展。
+
+## 示例
+
+### 创建自定义入口
+
+详见 [`bootstrap`](./bootstrap.md)。
+
+### 定制插件
+
+```ts
+import { createApp } from '@modern-js/runtime';
+
+function App() {
+  return <div>app</div>;
+}
+
+export default createApp({
+  plugins: [
+    router({}),
+    state({}),
+  ]
+})(App);
+```

package/zh/apis/app/runtime/core/use-loader.md

@@ -0,0 +1,83 @@
+---
+title: useLoader
+---
+
+一个同构的 API，通常会用来做异步请求。当 SSR 的时候，服务端使用 `useLoader` 预加载数据，同时浏览器端也会复用这部分数据。
+
+## 使用姿势
+
+```ts
+import { useLoader } from '@modern-js/runtime';
+```
+
+## 函数签名
+
+```ts
+type LoaderFn = (context: runtimeContext) => Promise<unknow>;
+type Options = {
+  onSuccess: (data: Record<string, any>) => void;
+  onError: (error: Error) => void;
+  initialData: Record<string, any>;
+  skip: boolean;
+  params: Record<string, any>;
+  static: boolean;
+}
+type ReturnData = {
+  data: Record<string, any>;
+  loading: boolean;
+  error: Error;
+  reload: (params?: Record<string, any>) => Promise<any> | undefined;
+  reloading: boolean;
+}
+
+function useLoader(loaderFn: LoaderFn, options: Options): ReturnData;
+```
+
+:::info
+`runtimeContext` 类型可以参考 [useRuntimeContext](/docs/apis/app/runtime/core/use-runtime-context)。
+:::
+
+### 参数
+
+- `loaderFn`：用于加载数据的函数，返回 Promise。
+- `options`：可选配置项。
+  - `onSuccess`：执行成功的回调。
+  - `onError`：执行失败的回调。
+  - `initialData`：首次执行前的初始数据，对应返回值中的 `data` 字段。
+  - `skip`：当值为 `true` 时，函数不执行。
+  - `params`：当 `params` 序列化结果发生改变时，函数会重新执行。同时，`params` 也会作为函数的第二个参数被传入。
+  - `static`：当值为 `true` 时，`useLoader` 用于 [SSG](/docs/guides/advanced-features/ssg) 编译阶段数据的获取。
+
+### 返回值
+
+- `data`：执行成功时的返回数据。
+- `loading`：表示函数是否处于执行过程中。
+- `error`：函数执行失败时的错误信息。
+- `reload`：调用后可以重新执行函数。
+  - `params`：当值为 `undefined` 时，函数执行时将复用上次的值；否则会使用新的值重新执行函数。
+- `reloading`：调用 `reload` 的执行过程中，`reloading` 值为 `true`。
+
+## 示例
+
+```ts
+function Container() {
+  const { data, error, loading } = useLoader(
+    async (context, params) => {
+      console.log(params) // nicole
+      return fetch(user);
+    },
+    {
+      onSuccess: data => {
+        console.log('I did success:(',  data);
+      },
+      onError: error => {
+        console.log('I met error:)',  error);
+      },
+      initialData: { name: 'nicole', gender: 'female' },
+      params: 'nicole'
+    }
+  );
+
+  return ...;
+}
+```

package/zh/apis/app/runtime/core/use-module-apps.md

@@ -0,0 +1,101 @@
+---
+title: useModuleApps
+---
+
+返回所有微前端子应用的 React 组件，用于可自由控制路由。
+
+## 使用姿势
+
+```tsx
+import { useModuleApps } from '@modern/plugin-garfish';
+```
+
+:::info 开启微前端
+该 API 在微前端主应用中使用，请先执行 `pnpm run new` 开启微前端功能。
+
+```bash
+pnpm run new
+? 请选择你想要的操作 启用可选功能
+? 启用可选功能 启用「微前端」模式
+```
+:::
+
+## 函数签名
+
+`function useModuleApps(): Record<string, React.FC<any>>`
+
+分别返回包裹每个子应用后的 React 组件。
+
+## 示例
+
+需要先配置微前端子应用信息。
+
+```ts title=modern.config.js
+module.exports = {
+  runtime: {
+    features:{
+      masterApp: {
+        apps: [
+          {
+            name: 'Home',
+            entry: 'http://www.home.com'
+          },
+          {
+            name: 'Contact',
+            entry: 'http://www.contact.com'
+          },
+        ]
+      }
+    }
+  }
+}
+```
+
+```tsx title=App.tsx
+function App() {
+  const { Components: { Home, Contact } } = useModuleApps();
+
+  return <div>
+    Master APP
+    <Route exact path='/home'>
+      <Home />
+    </Route>
+    <Route exact path='/home'>
+      <Contact />
+    </Route>
+  </div>;
+}
+```
+
+通过 `useModuleApps()` 获取到 `Home` 和 `Contact` 子应用组件（名称和配置里的 `name` 字段对应），之后就可以像使用普通的 React 组件一样去加载子应用。
+
+
+## 加载动画
+
+可以通过以下方式，自定义组件加载过程的过渡动画。
+
+```tsx title=App.tsx
+function App() {
+  const { Components: { Home } } = useModuleApps();
+
+  return <div>
+    Master APP
+    <Route exact path='/home'>
+      <Home
+        loadable={{
+          loading: ({ pastDelay, error }: any) => {
+            if (error) {
+              console.error(error);
+              return <div>error: {error?.message}</div>;
+            } else if (pastDelay) {
+              return <div>loading</div>;
+            } else {
+              return null;
+            }
+          },
+        }}
+      />
+    </Route>
+  </div>;
+}
+```

package/zh/apis/app/runtime/core/use-runtime-context.md

@@ -0,0 +1,59 @@
+---
+title: useRuntimeContext
+---
+
+该函数主要用于获取 Runtime 上下文，只能在函数组件中使用。
+
+## 使用姿势
+
+```tsx
+import { useRuntimeContext } from '@modern-js/runtime';
+
+export function App() {
+  const runtimeContext = useRuntimeContext();
+  return <div>Hello World</div>
+}
+```
+
+## 函数签名
+
+```ts
+type RuntimeContext = {
+  request: {
+    params: Record<string, string>;
+    pathname: string;
+    query: Record<string, string>;
+    headers: IncomingHttpHeaders;
+    cookie: string;
+  };
+  store: ReduckStore;
+}
+
+function useRuntimeContext(): RuntimeContext;
+```
+
+
+### 返回值
+
+- `request`：请求上下文中的附加信息。
+  - `params`：请求路径中的动态参数。
+  - `pathname`：请求的 pathname。
+  - `query`：请求的查询字符串对象。
+  - `headers`：请求头信息。
+  - `cookie`：请求的 cookie 信息。
+- `store`：在开启了 state 插件的时候，该值为 reduck 全局 `store`。
+
+## 示例
+
+```tsx
+import { useRuntimeContext } from '@modern-js/runtime';
+import { fooModel } from '@/common/models';
+
+function App() {
+  const { store } = useRuntimeContext();
+
+  const [state, actions] = store.use(fooModel);
+
+  return <div>state: {state}</div>
+}
+```

package/zh/apis/app/runtime/default-alias.md

@@ -1,19 +1,16 @@
 ---
 sidebar_position: 1
+title: 默认别名
 ---
-# 默认别名
-
-
-:::tip 提示
-- 除了以下默认别名，开发者可以在 `modern.config.js` 中自定义别名，详见[如何配置别名](/docs/configure/app/source/alias)。
-:::
-
 
 Modern.js 推荐通过别名的方式引用源码，其中包含 3 种默认别名:
 - `@/`：等价于引用项目根目录 `src/*` 下的文件。
 - `@api/`：等价于引用项目根目录下 `api/*` 下的文件（需要先开启 BFF 功能）。
 - `@shared/`：等价于引用项目根目录下 `shared/*` 下的文件。
 
+:::tip 提示
+- 除了以下默认别名，开发者可以在 `modern.config.js` 中自定义别名，详见[如何配置别名](/docs/configure/app/source/alias)。
+:::
 
 ## 示例
 下面的例子展示了如何通过默认别名引用函数。

package/zh/apis/app/runtime/env.md

@@ -3,30 +3,42 @@ sidebar_position: 1
 title: 环境变量
 ---
 
+Modern.js 内置了对环境变量的支持，包含内置的环境变量和自定义的环境变量。
 
-Modern.js 默认提供了下列环境变量：
+## 内置的环境变量
 
-- `NODE_ENV`：表示当前的执行环境。
-- `PORT`：表示应用运行的端口。
-
-## NODE_ENV
+### NODE_ENV
 
 表示当前的执行环境，是**只读的**的环境变量，其值在不同的执行命令下具有不同的值：
 
-- `production`：执行 `modern build` 命令时的默认值。
+- `production`：执行 `modern build`、`modern preview` 命令时的默认值。
 - `test`：执行 `modern test` 命令时的默认值。
 - `development`：执行 `modern dev` 命令时的默认值，同时也是其他所有情况下的默认值。
 
+### MODERN_ENV
+
+用于设置当前的执行环境，除了上述 NODE_ENV 对应的值之外，这里支持自定义环境名称，比如 `staging`、`boe` 等，Modern.js 会根据该环境变量对应的加载 env.{process.env.MODERN_ENV} 文件中设置的环境变量值。
+
+当需要通过环境名称使用不同的配置时，可以把环境变量定义到对应的环境名称的 env 文件中。
+
+MODERN_ENV 的优先级高于 NODE_ENV。
+
 ## 自定义环境变量
 
-除了上述默认提供的环境变量，还可以通过 `shell` 或 `.env` 文件自定义环境变量。
+Modern.js 支持自定义的环境变量，以 `MODERN_` 开头的环境变量可以在代码中直接使用。
+
+如果需要自动以任意名称的环境变量，需要在 [`source.define`](/docs/configure/app/source/define) 配置中声明后使用。
+
+## 定义环境变量
+
+环境变量支持通过 `shell` 和 `.env` 文件两种方式指定。
 
 ### 通过 `shell` 指定
 
 在命令前添加自定义环境变量：
 
 ```shell
-FOO=123 BAR=456 pnpm run dev
+REACT_APP_FOO=123 BAR=456 pnpm run dev
 ```
 
 ### 通过 `.env` 文件指定
@@ -34,21 +46,11 @@ FOO=123 BAR=456 pnpm run dev
 在项目根目录创建 `.env` 文件，其中添加自定义环境变量：
 
 ```env
-FOO=123
+REACT_APP_FOO=123
 BAR=456
 ```
 
-更多文件格式：
-
-- `.env`：默认文件。
-- `.env.development`：当 `NODE_ENV` 值为 `development` 时，读取该文件。
-- `.env.production`：当 `NODE_ENV` 值为 `production` 时，读取该文件。
-- `.env.test`：当 `NODE_ENV` 值为 `test` 时，读取该文件。
-
-### 优先级
-
-- 当 `.env.*` 与 `.env` 同时存在，`.env.*` 会和 `.env` 进行合并，相同名称的环境变量以 `.env.*` 为准。
-- 通过 `.env` 设置的环境变量，优先级高于 `shell` 指定的环境变量。
+.env 文件支持后缀名后 NODE_ENV 或 MODERN_ENV 定义的环境名称，如 `.env.development`，可根据项目需求进行定义。Modern.js 会根据环境名称变量值读取对应的 env 文件。
 
 ## 使用环境变量
 

package/zh/apis/app/runtime/model/Provider.md

@@ -3,13 +3,13 @@ sidebar_position: 8
 title: Provider
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
 `Provider` 是一个组件，它将 Reduck 的 Store 注入到应用的组件树中，使组件树内部的组件可以访问 Model。一般情况下，`Provider` 会定义在组件树的最顶层。
 
-## 类型
+## 函数签名
 
 ```ts
 interface ProviderProps {
@@ -18,15 +18,13 @@ interface ProviderProps {
 }
 ```
 
-## 参数
+### 参数
 
-- store：可选。[`createStore`](./create-store.md) 创建的 Store 对象。
-- config：可选。创建 Reduck Store 的配置，同 [`createApp`](./create-app.md) 的 `config` 参数。
+- store：[`createStore`](./create-store.md) 创建的 Store 对象。
+- config：创建 Reduck Store 的配置，同 [`createApp`](./create-app.md) 的 `config` 参数。
 
 ## 示例
-```tsx
-// 应用入口文件
-
+```tsx title="应用入口文件"
 ReactDOM.render(
   <Provider>
     <App />

package/zh/apis/app/runtime/model/_category_.json

@@ -1,4 +1,4 @@
 {
   "label": "Model API",
-  "position": 4
+  "position": 6
 }

package/zh/apis/app/runtime/model/auto-actions.md

@@ -3,8 +3,7 @@ sidebar_position: 6
 title: Auto actions
 ---
 
-
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 

package/zh/apis/app/runtime/model/connect.md

@@ -3,7 +3,7 @@ sidebar_position: 5
 title: connect
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
@@ -17,6 +17,9 @@ Reduck 原始类型较为复杂，以下涉及类型定义的地方，展示的
 ## 类型
 
 ```ts
+type SelectStateToProps = (...modelStates: State[], ownProps? :any) => PlainObject;
+type SelectActionsToProps = (...modelActions: Actions[], ownProps? :any) => PlainObject;
+
 function connect(models: Model, options?: ConnectOptions);
 function connect(
   models: [...Model[], SelectStateToProps?, SelectActionsToProps?],
@@ -26,11 +29,11 @@ function connect(
 
 
 ## 参数
-- models：传入的 1 个或 多个 Model，当 `models` 为数组类型参数时，最后两项元素可以是用于筛选 State 的函数（ `SelectStateToProps` 类型）和用于筛选 Actions 的函数（ `SelectActionsToProps` 类型）。
-  - `SelectStateToProps` 类型为 `(...modelStates: State[], ownProps? :any) => PlainObject`， `modelStates` 是传入的 Model 对象的 State 组成的数组，`ownProps` 是当前组件接收外部传递的 `props`，`SelectStateToProps` 返回的数据会传递到组件的 `props` 上。当 `models` 中没有传入 `SelectStateToProps` 参数时，所有 Model 的 State 进行合并后传递到组件的 `props` 上。
-  - `SelectActionsToProps` 类型为 `(...modelActions: Actions[], ownProps? :any) => PlainObject`， `modelActions` 是传入的 Model 对象的 Actions 组成的数组，`ownProps` 是当前组件接收外部传递的 `props`，`SelectActionsToProps` 返回的数据也会传递到组件的 `props` 上。当 `models` 中没有传入 `SelectActionsToProps` 参数时，所有 Model 的 Actions 进行合并后传递到组件的 `props` 上。
+- `models`：传入的 1 个或多个 Model，当 `models` 为数组类型参数时，最后两项元素可以是用于筛选 State 的函数（ `SelectStateToProps` 类型）和用于筛选 Actions 的函数（ `SelectActionsToProps` 类型）。
+  - `SelectStateToProps`： `modelStates` 是传入的 Model 对象的 State 组成的数组，`ownProps` 是当前组件接收外部传递的 `props`，`SelectStateToProps` 返回的数据会传递到组件的 `props` 上。当 `models` 中没有传入 `SelectStateToProps` 参数时，所有 Model 的 State 进行合并后传递到组件的 `props` 上。
+  - `SelectActionsToProps`： `modelActions` 是传入的 Model 对象的 Actions 组成的数组，`ownProps` 是当前组件接收外部传递的 `props`，`SelectActionsToProps` 返回的数据也会传递到组件的 `props` 上。当 `models` 中没有传入 `SelectActionsToProps` 参数时，所有 Model 的 Actions 进行合并后传递到组件的 `props` 上。
 
-- options：可选参数，用于辅助配置。目前支持设置 `forwardRef`，用于控制是否转发组件的 `ref`，默认值为 `false`，表示不转发 `ref`。设置为 `{forwardRef: true}`，表示转发 `ref`。
+- `options`：可选参数，用于辅助配置。目前支持设置 `forwardRef`，用于控制是否转发组件的 `ref`，默认值为 `false`，表示不转发 `ref`。设置为 `{forwardRef: true}`，表示转发 `ref`。
 
 
 ## 返回值

package/zh/apis/app/runtime/model/create-app.md

@@ -3,18 +3,17 @@ sidebar_position: 11
 title: createApp
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
-一个 Reduck 应用对应共享一个 Store 的应用。Reduck 内部默认会使用 `createApp` 创建一个全局应用，如果整个应用只需要共享一个 Store，那么是不需要使用 `createApp` 的。只有当需要在应用局部创建共享 Store 时，才需要使用 `createApp` 。
-
+Reduck 内部默认会使用 `createApp` 创建一个全局应用，如果整个应用只需要共享一个 Store，那么是不需要使用 `createApp` 的。只有当需要在应用局部创建共享 Store 时，才需要使用 `createApp`。
 
 :::caution 注意
 - 注意 `@modern-js/runtime/model` 中导出的 `createApp` 用于管理状态，而 `@modern-js/runtime` 导出的 `createApp` 用于管理整个应用的运行时环境，两者功能不同。
 :::
 
-## 类型
+## 函数签名
 
 ```ts
 interface AppConfig extends StoreConfig {

package/zh/apis/app/runtime/model/create-store.md

@@ -3,15 +3,17 @@ sidebar_position: 10
 title: createStore
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
 
-`createStore` 用于创建一个 Store 对象。Reduck 的 Store 基于 Redux 的 [Store](https://redux.js.org/api/store) 实现，用于存储应用的状态，同时提供一组用于管理状态和 Model 的方法。一般情况下，不需要使用这个 API，只有需要完全掌控 Store 的创建时，才会使用这个 API。例如，自定义一个 Store，传入 [`Provider`](./Provider.md) 组件使用。
+`createStore` 用于创建一个 Store 对象。Reduck 的 Store 基于 Redux 的 [Store](https://redux.js.org/api/store) 实现，用于存储应用的状态，同时提供一组用于管理状态和 Model 的方法。
 
+一般情况下，不需要使用这个 API，只有需要完全掌控 Store 的创建时，才会使用这个 API。例如，自定义一个 Store，传入 [`Provider`](./Provider.md) 组件使用。
 
-## 类型
+
+## 函数签名
 
 ```ts
 interface StoreConfig {

package/zh/apis/app/runtime/model/handle-effect.md

@@ -3,11 +3,11 @@ sidebar_position: 7
 title: handleEffect
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
-一个异步函数类型的 Effect，通常有三种需要处理的状态: 1.请求中；2.请求成功；3.请求处理失败。这些状态处理的方式，就是编写对应的 Action 函数(pending、fulfilled、rejected)。
+一个异步函数类型的 Effect，通常有三种需要处理的状态: 请求中、请求成功、请求处理失败。这些状态处理的方式，就是编写对应的 Action 函数(pending、fulfilled、rejected)。
 
 借助 `handleEffect` API，我们可以生成默认的 Action 函数来处理异步请求各个阶段的不同结果。`handleEffect` 生成的 Action 返回的 State 的结构如下：
 
@@ -19,7 +19,7 @@ interface State {
 }
 ```
 
-## 类型
+## 函数签名
 
 ```ts
 interface EffectActions {
@@ -40,7 +40,7 @@ interface Config {
 function handleEffect(config: Config): EffectActions;
 ```
 
-## 参数
+### 参数
 
 - ns：默认返回的 State 结构扁平地挂载到 Model 的 State 上，通过设置该参数可以将返回的 State 挂载到 `ns` 值命名的字段下。例如，`ns` 设置为 `data`，返回的 State 结构为：
 
@@ -96,7 +96,7 @@ interface State {
 ```
 
 
-## 返回值
+### 返回值
 
 分别处理 pending、fulfilled、rejected 三种状态的 Action 组成的对象。
 

package/zh/apis/app/runtime/model/model_.md

@@ -3,7 +3,7 @@ sidebar_position: 1
 title: model
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
@@ -31,7 +31,7 @@ model('foo');
 
 `function define(modelDesc: ModelDesc): Model;`
 
-- modelDesc: `ModelDesc`，是对 Model 结构的定义，包含 `state`、`computed`、`actions`、`effects` 等属性。
+- modelDesc: `ModelDesc`，对 Model 结构的定义，包含 `state`、`computed`、`actions`、`effects` 等属性。
 
 ```tsx title="示例"
 const fooModel = model('foo').define({
@@ -105,7 +105,7 @@ const barModel = model('bar').define((_, { use }) => {
 
 #### ModelDesc.state
 
-定义 Model 的状态。技术上，支持任意类型的 **state**，但是实践中建议使用可进行 JSON 序列化的类型。
+定义 Model 的状态。技术上，支持任意类型的 **State**，但是实践中建议使用可进行 JSON 序列化的类型。
 
 ```ts
 interface ModelDesc {

package/zh/apis/app/runtime/model/use-local-model.md

@@ -3,11 +3,11 @@ sidebar_position: 4
 title: useLocalModel
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
-用于把 Model 中的 State 作为局部状态使用，效果类似 React 的 `useState`。`useStaticModel` API 形式上与 `useModel` 完全一致。具体使用请参考 [`useModel`](./use-model.md)。
+用于把 Model 中的 State 作为局部状态使用，效果类似 React 的 `useState`。`useLocalModel` API 形式上与 `useModel` 完全一致。具体使用请参考 [`useModel`](./use-model.md)。
 
 
 #### 示例

package/zh/apis/app/runtime/model/use-model.md

@@ -3,7 +3,7 @@ sidebar_position: 2
 title: useModel
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
@@ -11,6 +11,7 @@ import ReduckTip from '@site/docs/components/reduck-tip.md'
 Reduck 原始类型较为复杂，以下涉及类型定义的地方，展示的是简化后的类型信息。原始类型见 [model](https://github.com/modern-js-dev/reduck/blob/main/packages/store/src/model/useModel.ts)。
 :::
 
+## 函数签名
 
 ```ts
 function useModel(
@@ -25,20 +26,18 @@ function useModel(
 ): [state, actions, subscribe];
 ```
 
-
-## 参数
+### 参数
 
 - models：Model 对象数组，可以作为一个数组类型的参数传入，也可以所有 Model 逐个作为参数传入。
 - stateSelector：可选参数，用于筛选 State 计算。前 n 个参数为 n 个 Model 对应的 State，返回的数据作为 `useModel` 返回值数组的第一个元素。
 - actionSelector：可选参数，用于筛选 Actions 计算。前 n 个参数为 n 个 Model 对应的 Actions，返回的数据作为 `useModel` 返回值数组的第二个元素。
 
-
-## 返回值
+### 返回值
 
 返回一个数组，每一项元素分别为：
 
-- state： `stateSelector` 的返回值。如果未传 `stateSelector`，会把传入的所有 Model 的 State (包含衍生状态)合并后返回。如果不同 Model 的 State 中存在同名属性，后面的 State 会覆盖前面的 State 。当 `state` 发生变化时，调用 `useModel` 的组件会重新渲染。
-- actions：第二个元素为 `actionSelector` 的返回值。如果未传 `actionSelector`，会把传入的所有 Model 的 Actions (包含 Effects) 合并后返回。如果不同 Model 的 Actions 中存在同名属性，后面的 Actions 会覆盖前面的 Actions 。
+- state：`stateSelector` 的返回值。如果未传 `stateSelector`，会把传入的所有 Model 的 State (包含衍生状态)合并后返回。如果不同 Model 的 State 中存在同名属性，后面的 State 会覆盖前面的 State。当 `state` 发生变化时，调用 `useModel` 的组件会重新渲染。
+- actions：第二个元素为 `actionSelector` 的返回值。如果未传 `actionSelector`，会把传入的所有 Model 的 Actions (包含 Effects) 合并后返回。如果不同 Model 的 Actions 中存在同名属性，后面的 Actions 会覆盖前面的 Actions。
 - subscribe：订阅 State 变化的函数。当传入的任意 Model 的 State 发生改变时，该函数会被调用。
 
 ## 示例

package/zh/apis/app/runtime/model/use-static-model.md

@@ -3,7 +3,7 @@ sidebar_position: 3
 title: useStaticModel
 ---
 
-import ReduckTip from '@site/docs/components/reduck-tip.md'
+import ReduckTip from '@site-docs/components/reduck-tip.md'
 
 <ReduckTip />
 
@@ -27,7 +27,7 @@ function App() {
 
 #### 示例
 
-如下 `App` 组件消费了 `userModel` 的状态，但没有直接在 JSX 里使用。如果 `userModel` 状态的改变会引起组件重新渲染，这是没有必要的，这种情况可以使用 `useStaticModel` 进行优化。
+如下 `App` 组件消费了 `userModel` 的状态，但没有直接在 JSX 里使用。可以发现，`userModel` 状态的改变没有必要引起组件重新渲染，这种情况可以使用 `useStaticModel` 进行优化。
 
 ```tsx
 function App() {