Рубрики
Без рубрики

Как построить государственный маршрутизатор, используя дерево в React и Mobx

Майми до того, как построить государственный маршрутизатор, используя React и MobX State TreeIntRoducing Mobx-State-Tree-маршрутизатор Изображение MOBX на FlickRif, вы хотите пропустить до готового примера, вы можете проверить это на дереве Mobx-State Маршрутизатор-демонстрация. Я написал библиотеку, которая позволяет легко настроить маршрутизацию на основе состояния в

Автор оригинала: FreeCodeCamp Community Member.

по милям до

Введение Mobx-State-Tree-маршрутизатор

Если вы хотите пропустить заранее в готовый пример, вы можете проверить это в Mobx-State-Tree-Router-Demo .

Я написал библиотеку, которая позволяет легко настроить маршрутизацию на основе состояния в Ababx State Tree Powered React Apps, и я хочу поделиться с вами. Для этого я продемонстрирую, как построить очень простое приложение TODO.

Мишель Вестерстрат , создатель Mobx, написал отличную статью под названием Как декрегировать состояние и UI (A.k.a. Вам не нужна компонентWillmount) Отказ Я рекомендую прочитать его, чтобы понять философию, которая вдохновила меня, чтобы написать Mobx-State-Tree-Router. Ключевой идеей состоит в том, что приложение UI должно быть функцией состояния.

Предпосылки

Это необходимо будет установить, чтобы следовать этому руководству:

  • Node.js – используется для запуска сервера Dev
  • Пряжа – используется для управления пакетом

Примечание: NPM можно использовать вместо пряжи, но некоторые команды могут быть разными.

Создать базовое приложение React

Используйте приложение Create-React-App для быстрого начала

Если вы не использовали его раньше, самый простой способ начать работу с приложением React – использовать инструмент для лесов для разработчиков React React Создать ract app Отказ Этот инструмент настраивает WebPack и Бабел Для вас с наиболее распространенными требованиями встречались.

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

npx create-react-app state-router-democd state-router-demoyarn start

Теперь у вас будет полностью функционирующее приложение Basic React для воспроизведения.

Удалить материал Create-React-App, не требуемый для этого примера

Для целей этого учебника нам не нужно много материалов, которые создают App-ract – App, так что идут вперед и удалить:

src/App.csssrc/App.test.jssrc/index.csssrc/logo.svgsrc/serviceWorker.js

Примечание. Не стесняйтесь хранить файлы CSS и добавьте свой собственный стиль.

Держать вещи организованными, создать Компоненты каталог в нашем SRC и двигаться SRC/App.js к SRC/Компоненты/App.js Отказ

Теперь обновите следующие файлы, чтобы удалить ссылки на файлы, которые мы удалены:

SRC/Компоненты/app.js

SRC/index.js.

Если у вас все еще есть приложение, за которым вы заметите, ваш браузер обновил, чтобы показать вам следующее:

Создать домашний компонент страницы

В Компоненты Каталог, создайте файл для нашей домашней страницы Компонент:

SRC/Компоненты/Home.js

Обновите компонент приложения для оказания нашей новой домашней страницы компонента:

SRC/Компоненты/app.js

Добавьте MobX State Dreaks Models

Установите дерево MOBX и MOBX

MobX Это библиотека для государственного управления, и она отлично работает с реагированием в качестве нашего рендерера. Mobx State Tree Это контейнер в форме дерева, построенный на вершине Mobx.

В вашем терминале запущен:

yarn add mobx mobx-react mobx-state-tree

Как и наши мы сделали для наших компонентов, создайте модели Справочник для сохранения наших моделей Tree Tree Mobx.

Создать модель rootstore

В нашем штате у нас будет Rootstore который содержит наши хранимы данных (в этом случае A Toostore ) и наши RouterStore , но мы доберемся до этого позже.

SRC/Models/rootstore.js

Создать Toostore и ToDo модели

Наше Тодостор Содержит Todo Объекты, которые могут быть созданы, удалены и обновлены. Мы также должны быть в состоянии найти Todo объект по его ID Отказ

SRC/модели/TooStore.js

Инициализировать корневую позицию

Когда наши приложения загружаются, мы хотим инициализировать Rootstore с известным состоянием. Для этого тривиального примера мы не будем беспокоиться о том, чтобы сохранить наши данные на хранение любым способом. Затем мы хотим убедиться, что Rootstore Доступно, чтобы вводиться в наши компоненты, поэтому мы используем компонент React Mobx Провайдер сделать это.

SRC/index.js.

Создать компонент Todolist Page

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

SRC/Компоненты/ToList.js

Обновите Приложение Компонент для отображения нашего нового Тодолист составная часть.

SRC/Компоненты/app.js

В этот момент приложение должно иметь список Todo Объекты, которые вы можете добавить и удалить.

Создайте компонент Page Page

Теперь мы хотим создать новый компонент для отображения и редактирования Todo объект. Обратите внимание, что мы используем вставлять сделать Rootstore Доступно в реквизитах компонента.

SRC/Компоненты/todo.js

Обновите Приложение Компонент для отображения нашего нового Todo составная часть.

Теперь наше обновленное приложение позволяет нам редактировать данные Todo Чей удостоверение личности мы переходим к компоненту страницы Todo в />.

Добавить государственную маршрутизацию

На этом этапе мы должны иметь приложение React с нашими данными, хранящимися в контейнере Tree дерева MOBX. Контейнер данных затем вводится в компоненты, которые нуждаются в доступе к данным. Теперь мы хотим объединить компоненты нашей страницы в нашем приложении. Обычный подход будет использовать компонентный маршрутизатор, такой как React Router Отказ Часто компоненты становятся загроможденными с определениями маршрутов и обработчиками событий монтирования. Это не устраивает нашу государственную философию.

Теперь я покажу вам, как добавить Mobx-State-Tree-Router в ваше приложение.

Установите MobX-State-Tree-маршрутизатор

В вашем терминале запущен:

yarn add mobx-state-tree-router

Добавьте маршрутизатор в rootstore

SRC/Models/rootstore.js

Создание просмотров

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

Эти крючки:

  • BeForeexit (Self, Params)
  • fromepter (Self, Params)
  • Onexit (Self, Params)
  • ОНИГЕРА (Само, Пармы)

Если один из точек до завершения крючка возвращается ложь Изменение маршрута будет отменено.

Создать Виды файл:

SRC/Views.js.

Инициализировать маршрутизатор, когда наше приложение начинается

Маршрутизатор может быть запущен, позвонив startrouter (маршрутизатор) Отказ Эта функция соединяет маршрутизатор к истории браузера и настраивает маршрутизацию на основе представлений маршрутизатора.

SRC/index.js.

Визуализация

Обновите Приложение Компонент, чтобы включить Staterouter Компонент, который делает соответствующий компонент для текущего представления маршрутизатора.

SRC/Компоненты/app.js

Теперь наше приложение ответит на изменения в пути URL, например /Тодос покажу наше Тодолист Компонент и /Тодос/0 покажу наше Todo Компонент как настроен в Views.js Отказ

Добавить навигационные ссылки

В настоящее время наше приложение не имеет никакого способа перемещаться по другим, кроме изменения URL напрямую. Это не особенно хорошо работает в этом простом примере, как данные в наших Rootstore будет сброшен в исходное состояние, как определено в index.js Каждый раз, когда страница загружает.

Существует 2 других способа изменить маршрут с помощью MobX-State-Tree-маршрутизатора:

  • Ссылка составные части
  • Призыв Router.SetView (просмотр, параметры) напрямую

Рекомендую использовать Ссылка Компоненты, где это возможно, но в некоторых случаях (например, перенаправления) устанавливают вид напрямую может быть неизбежно. Давайте обновим наше Приложение и Тодолист Компоненты для добавления некоторых навигационных ссылок с использованием обоих методов:

SRC/Компоненты/app.js

SRC/Компоненты/ToList.js

Теперь вы сможете добавить Todo Пункт на Тодос Просмотр, затем нажмите кнопку Открыть, чтобы пойти Todo Вид на новый предмет:

Заключение

Я создал маршрутизатор Mobx-State-Tree-Router, потому что я обнаружил, что в ландшафте имеется пробел в ландшафте для библиотеки маршрутизации на основе государственной маршруты для использования с деревом MobX State. Я нашел его, чтобы быть полезным для меня, поэтому я надеюсь, что это также может быть полезно для более широкого сообщества.

Если вы еще не прочитали Статья Мишеля Вестерстрата Для некоторого фона на государственной маршрутизации.

Если у вас есть какие-либо вопросы, чтобы поднять или взносы, чтобы сделать, пожалуйста, отправляйтесь на Mobx-State-Tree-маршрутизатор на Github Отказ

Читайте ещё по теме: