Узнайте:
- Почему согласованность в вашем приложении улучшает пользовательский опыт
- Как использовать структуру для создания согласованности
- Как реализовать динамическую маршрутизацию с помощью React Router, чтобы сделать ваше приложение предсказуемым
Два «С»: согласованность и удобство
Все мы слышали пресловутое утверждение «Если вы это построите, они придут». С помощью стратегии и исследований мы определяем, почему «они», или целевой пользователь, «придут». Затем мы создаем приложение, чтобы удовлетворить это «почему», независимо от того, насколько значимым или тривиальным оно может быть. Теперь я предлагаю новую цитату: «Если они придут, как долго они останутся?».
Наверняка вы уже делали покупки на Amazon. Независимо от того, какой товар вы хотите приобрести, вы используете одну и ту же процедуру. Вводите ключевое слово для поиска, сортируете товары, читаете пару отзывов, добавляете в корзину и оформляете заказ. Достаточно просто.
Именно этот уровень последовательности усиливает положительный пользовательский опыт. Если мы предоставляем последовательный опыт, то у пользователя будут соответствующие ожидания. Нам легче принимать решения, когда мы знаем, чего ожидать. Следовательно, пользователю будет очень комфортно пользоваться нашим приложением. То, как пользователь взаимодействует и реагирует на ваше приложение, определяет пользовательский опыт.
Как достичь согласованности с помощью React
Как и Amazon, мы хотим, чтобы наши пользователи оставались. Чтобы показать, как реализовать эти принципы, я создал Order Pro. 
Order Pro — это приложение для управления заказами, предназначенное для малого розничного бизнеса. Оно позволяет пользователям создавать заказы и записывать информацию о клиентах. Все заказы хранятся в локальной базе данных, доступ к которой пользователь может получить через таблицу заказов.
Главный ключ🔑 Предупреждение: структурируйте свою базу данных, прежде чем погружаться в IDE. Знайте, как вы собираетесь хранить данные, прежде чем захватывать и отображать их.
Во-первых, нам нужно получить информацию о заказе. Мы уже знаем, какую информацию нам нужно захватить, потому что мы структурировали нашу базу данных. И мы фиксируем эту информацию с помощью управляемой формы. Если вы не знаете, как настроить управляемую форму в React, я рекомендую эту статью о том, как создать управляемую форму с помощью React. Мы отправляем каждый новый заказ в локальный JSON файл сервера «db.json» в виде объекта.
{
"orders": [
{
"name": "Johnny Appleseed",
"email": "johnE@email.com",
"date": "2022-04-01",
"number": 1003,
"items": [
"3 shirts",
"2 tables",
"1 bag of soil"
],
"fulfilled": false,
"id": 1
}
]
}
Статические маршруты против динамических маршрутов
Мы храним массив объектов заказов в State. Используя React Components, мы создали многократно используемые блоки кода для единообразного отображения каждого заказа. Каждый заказ отображается в виде отдельной строки таблицы. Мы даже создали красивую строку поиска, чтобы помочь владельцу магазина найти заказ.
До этого момента мы использовали статические маршруты для отображения компонентов нашей страницы. Наша форма заказа, панель заказов и домашняя страница — это все пути, которые нам пришлось прокладывать вручную. Мы хотим, чтобы у каждого заказа был свой URL, где владелец магазина мог бы просматривать информацию, которую мы не смогли вместить в приборную панель.
Так же, как строки таблицы автоматически отображаются, мы хотим, чтобы страницы заказов автоматически маршрутизировались и реагировали на передаваемую информацию о заказах. Нам нужно создать только один компонент, OrderNumberPage, для всех заказов. Почему? Потому что создавать статический маршрут для каждого заказа так же продуктивно, как ловить ветер в банке.
<Fragment>
<Navigation logo={logo}/>
<Switch>
<Route exact path="/orders">
<Orders>
<SearchBar orders={orders} setSearch={setSearch} setFilter={setFilter} search={search}/>
<OrderTable orders={orders} setOrders={setOrders} url={url} search={search} filter={filter}/>
</Orders>
</Route>
<Route exact path="/create-order">
<OrderForm orders={orders} setOrders={setOrders} url={url}/>
</Route>
<Route exact path="/">
<HomePage logo={logo}/>
</Route>
<Route exact path="/orders/:orderNumber" >
<OrderNumberPage orders={orders}/>
</Route>
</Switch>
</Fragment>
Теперь, когда вы положили свой кувшин, давайте импортируем наш компонент OrderNumberPage в наш файл App.js и добавим его к нашему компоненту Switch (показанному выше).
Я решил разместить компонент Order Number Page рядом с другими статическими страницами, потому что я хочу отображать только детали для выбранного заказа.
Если внимательно посмотреть на URL компонента OrderNumberPage, то можно заметить уникальный идентификатор :orderNumber. Это значение будет указывать на выбранный заказ для отображения. Позже мы воспользуемся хуком useParams для доступа к идентификатору orderNumber.
Генерация динамических ссылок
Давайте заглянем под капот компонента TableRow, чтобы увидеть, как генерировать ссылки на каждую страницу заказа.
В строке 6 я де-структурирую объект заказа, переданный этому компоненту в качестве реквизита. В строке 34 я использую ключ номера и интерполяцию для генерации URL для каждого заказа. Если номер заказа для этой строки таблицы 1011, то URL будет «/orders/1011».
Теперь, когда у нас есть ссылки для каждого заказа и место назначения, нам нужно каким-то образом сообщить странице OrderNumberPage, какую информацию о заказе отображать.
Крючок useParams
Импортируйте хук useParams в компонент OrderNumberPage. Хук useParams возвращает объект с парами ключ/значение, одним из которых является уникальный идентификатор orderNumber, установленный нами ранее.
В строке 9 я присваиваю переменную params функции useParams(). params.orderNumber позволит нам получить доступ к параметру URL :orderNumber из текущего маршрута. Если мы нажмем на ссылку для заказа 1011, params.orderNumber вернет 1011.
Мы будем использовать это значение для поиска заказа, номер которого совпадает с params.orderNumber, и в строке 12 отфильтруем его из списка заказов. Затем мы отобразим информацию для этого конкретного заказа в компоненте OrderNumberPage.
Заключение
Мы настроили динамический маршрут с уникальным параметром URL. Мы использовали хук React’s useParams и наш уникальный параметр для доступа к значению, которое мы использовали для отображения определенной информации в нашем компоненте. Используя динамическую маршрутизацию, мы создали последовательный и предсказуемый пользовательский опыт. Мы значительно облегчили жизнь наших пользователей, поскольку функциональность нашего приложения предсказуема.
Вот ссылка на репозиторий Order Pro, если вы хотите проверить его.
Рекомендации по ресурсам
Как думают клиенты — Джеральд Залтман