Глобальный контекст приложения

Глобальный контекст приложения в TanStack Router играет ключевую роль в организации состояния и логики, доступной на уровне всего маршрутизатора. Он обеспечивает централизованное хранение данных и методов, которые могут понадобиться различным маршрутам и компонентам, без необходимости их передачи через пропсы на каждом уровне.

Создание и использование глобального контекста

В TanStack Router глобальный контекст определяется с помощью объекта createRouterContext или через опцию context при инициализации маршрутизатора. Он позволяет передавать произвольные данные, функции и состояния, которые будут доступны всем маршрутам.

Пример создания глобального контекста:

import { createRouter, RouterProvider } from '@tanstack/router';
import { createContext, useContext } from 'react';

const AppContext = createContext();

const router = createRouter({
  context: AppContext,
  routes: [
    {
      path: '/',
      component: HomePage,
    },
    {
      path: '/profile',
      component: ProfilePage,
    },
  ],
});

function App() {
  const globalState = {
    user: { name: 'Alice', role: 'admin' },
    isAuthenticated: true,
    logout: () => { /* реализация выхода */ },
  };

  return (
    <AppContext.Provider value={globalState}>
      <RouterProvider router={router} />
    </AppContext.Provider>
  );
}

В этом примере создаётся контекст AppContext, который содержит глобальные данные user, isAuthenticated и функцию logout. Любой компонент маршрута может получить доступ к этим данным через useContext(AppContext).

Доступ к глобальному контексту в маршрутах

TanStack Router интегрируется с React-контекстами, что позволяет легко использовать глобальный контекст внутри компонентов маршрутов:

import { useContext } from 'react';

function ProfilePage() {
  const { user, logout } = useContext(AppContext);

  return (
    <div>
      <h1>Профиль: {user.name}</h1>
      <button onCl ick={logout}>Выйти</button>
    </div>
  );
}

Здесь ProfilePage напрямую использует данные из глобального контекста, без необходимости получать их через пропсы от родительских компонентов. Это позволяет уменьшить связность компонентов и упростить поддержку приложения.

Динамическое обновление глобального контекста

Глобальный контекст может содержать состояния, которые обновляются динамически с помощью хуков, например useState или useReducer. Это позволяет маршрутам автоматически реагировать на изменения состояния.

function App() {
  const [user, setUser] = useState({ name: 'Alice', role: 'admin' });

  const globalState = {
    user,
    updateUser: setUser,
  };

  return (
    <AppContext.Provider value={globalState}>
      <RouterProvider router={router} />
    </AppContext.Provider>
  );
}

function HomePage() {
  const { user, updateUser } = useContext(AppContext);

  const changeName = () => {
    updateUser({ ...user, name: 'Bob' });
  };

  return (
    <div>
      <h1>Добро пожаловать, {user.name}</h1>
      <button onCl ick={changeName}>Сменить имя</button>
    </div>
  );
}

Любые изменения состояния user будут автоматически доступны всем компонентам, использующим этот контекст, что обеспечивает согласованность данных по всему приложению.

Использование глобального контекста с хуками TanStack Router

TanStack Router предоставляет специальные хуки, такие как useRouterContext или useRouteContext, которые упрощают доступ к контексту маршрутизатора и его глобальным данным. Эти хуки позволяют не импортировать контекст напрямую, сохраняя гибкость архитектуры.

import { useRouterContext } from '@tanstack/router';

function Dashboard() {
  const routerContext = useRouterContext();
  const { user } = routerContext;

  return <div>Панель пользователя: {user.name}</div>;
}

Использование встроенных хуков делает код более декларативным и интегрированным с самим маршрутизатором, упрощая управление состоянием приложения и маршрутов одновременно.

Лучшие практики работы с глобальным контекстом

  • Минимизировать данные в контексте: включать только те данные и функции, которые действительно нужны нескольким маршрутам.
  • Разделять контексты по ответственности: для больших приложений имеет смысл создавать отдельные контексты для аутентификации, настроек интерфейса и бизнес-логики.
  • Использовать хуки для доступа к состоянию: это упрощает тестирование и поддержание кода.
  • Избегать глубоких вложенных структур: сложные объекты усложняют обновление и могут приводить к лишним перерендерингам компонентов.

Глобальный контекст TanStack Router обеспечивает мощный механизм для централизованного управления состоянием, интегрированного с маршрутизатором, что упрощает архитектуру больших приложений и делает код более поддерживаемым.

Оглавление