指南
配置
插件
API
教程
社区
指南
配置
插件
API
教程
社区
简体中文

useRuntimeContext

该函数主要用于获取 Runtime 上下文，只能在函数组件中使用。

使用姿势

import { useRuntimeContext } from '@modern-js/runtime';

export function App() {
  const runtimeContext = useRuntimeContext();
  return <div>Hello World</div>;
}

函数签名

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 返回值。
    • navigate：导航到给定路径。同 useNavigate 返回值。

示例

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