---
title: useRuntimeContext
---
# 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;
  router: RemixRouter;
};

function useRuntimeContext(): RuntimeContext;
```

### 返回值

- `request`：请求上下文中的附加信息。
  - `params`：请求路径中的动态参数。
  - `pathname`：请求的 pathname。
  - `query`：请求的查询字符串对象。
  - `headers`：请求头信息。
  - `cookie`：请求的 cookie 信息。
- `store`：在开启了 state 插件的时候，该值为 Reduck 全局 `store`。
- `router`：在开启 router 插件的时候存在。
  - `location`：当前路由对应的位置信息。同 [`useLocation`](/apis/app/runtime/router/router.html#uselocation) 返回值。
  - `navigate`：导航到给定路径。同 [`useNavigate`](/apis/app/runtime/router/router.html#usenavigate) 返回值。

## 示例

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