Как проложить маршрут в качестве хакера с помощью MobX и router5

1656653887 kak prolozhit marshrut v kachestve hakera s pomoshhyu mobx i

Ойген Кисс

Маршрутизация, подходящая для вашей программы — а не наоборот

1*HFkjeBT-TZJ2e-4idMK3Gw
Фото Роба Бейтса на Unsplash

Существует множество способов подхода к маршрутизации в программах на стороне клиента. Такие фреймворки как Android обеспечивают мощные, но также сложные и иногда ограничительные механизмы маршрутизации. То же касается полноценных библиотек маршрутизации в интерфейсе, таких как React Router.

Хорошая новость состоит в том, что вы можете написать собственный более простой уровень маршрутизации, не отказываясь от контроля: Маршрутизация, подходящая для вашей программы– а не наоборот!

Чтобы проиллюстрировать эти концепции, давайте напишем приложение HackerNews и взять под контроль маршрутизацию. Мы будем использовать React, MobX и router5.

1*2cCaL3YcvzflnIjfzyMAmw

Это живой результат:

В примере используется API HNPWA. Вот проект Github.

Начнем с определения кормить маршрут:

свойства name, pathи comp очевидны. С link ты имеешь обратная маршрутизация с поддержкой типа. В функции жизненного цикла activate , вы обновляете глобальное состояние и выполняете запросы API. Зависимость store это ваша центральная панель управления состоянием и действиями. В последней строке вы добавляете FeedRoute в реестр маршрутов routes.

Крутая вещь о FeedRoute или это все, что касается маршрута до/с кормить экран определяется в одном месте. Кроме того, вам не нужен контейнерный компонент для выполнения запросов API.

Вот как вы воспроизводите текущий маршрут:

Наблюдаемое свойство store.route содержащий текущий маршрут. В вашем реестре маршрутов store.routes вы найдете подходящее определение маршрута. Итак, вы знаете, какой компонент рендерит. Если вы на / компонент будет <FeedScreen/>. Будучи одержимымrver, приложение повторно рендерит, когда наблюдательvable store.изменения маршрута.

Это суть!

Настройка

Как все это настроить с помощью MobX и router5? Кто обновляет текущий маршрут? Что делает store выглядит как? Чтобы узнать, читайте дальше!

В сторону: Хотя библиотека маршрутизации не требуется, я рекомендую router5. Это дает вам более удобный API (+ хуки и утилиты), чем нативный API обозреватель.

Определение плагина router5:

Плагин router5 реализует функции жизненного цикла. После успешного перехода вы деактивируете предыдущий маршрут. Затем вы устанавливаете store.route в следующий маршрут и включите следующий маршрут. Деактивация производит очистку. Активация выполняет запросы API и другую логику инициализации. Остальный код касается API router5.

Вот соответствующие части из store:

Выбранный канал происходит от URL-адреса. Благодаря мощности распространения MobX нет дублирования состояния!

В сторону: Я использую специальный помощник по получению, который будет темой другой статьи.

В моем клиенте HackerNews (в прямом эфире) стек истории отслеживает посещенные маршруты. Он используется для рендеринга экранов друг на друга. Все, кроме самого верхнего экрана, имеют display установлен в none. Это позволяет вернуться к предыдущему экрану на мобильных устройствах. гораздо быстрее!

Мой маршрутизатор также выполняет восстановление состояния просмотра. Подумайте о положении прокрутки. Но вы также можете сохранить его минимальным, как показано здесь. Помните, что вы контролируете маршрутизацию: делайте это способом, который лучше всего подходит для вашей программы. См. также обсуждение React Router по восстановлению прокрутки и обсуждение router5 о загрузке асинхронных данных.

Представленный подход вдохновлен:

Если вам понравилась статья, порекомендуйте и поделитесь ею. Счастливый маршрут!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *