Я пытаюсь заменить приложение Backbone.Marionette на React и сталкиваюсь с трудностями, думая о параметрах запроса. Я думаю, что я пропустил очень простой мир в понимании этого шаблона, поэтому я извиняюсь, если этот вопрос совершенно вздор. Я был бы признателен за любую поддержку или просто указал бы мне на какое-то направление, что я могу сделать Google более конкретно.
Здесь есть страница /users
, в которой перечислены пользователи, и вы можете фильтровать пользователей через панель поиска. Поэтому, если вы хотите отфильтровать пользователей, которые содержат "joe" в своем имени пользователя, я бы сделал запрос на сервер с параметрами запроса, такими как /users?username=joe
. Кроме того, я могу разбивать на страницы, добавляя также параметр page
(/users?username=joe&page=1
).
Если я только подумаю о функциональности, поток, вероятно, будет
- Клиент вставляет
joe
во входной элемент и нажимает Поиск. - При нажатии кнопки Поиск запускается
Action
(например, Action.getUser). -
Action
делает запрос на сервер и получает результаты -
Dispatcher
отправляет функцию с полезной нагрузкой результатов кому угодно (обычноStore
) интересуетсяAction
. - Состояние
Store
изменяется с новым результатом, полученным с помощьюAction
- Просмотр (
Component
) повторно отображается, прослушивая изменениеStore
.
и работает так, как ожидалось. Тем не менее, я хотел бы, чтобы у Клиента была возможность закладки текущего отфильтрованного результата и возможность вернуться на одну страницу позже. Это означает, что мне нужно где-то сохранить явную информацию о запросе Клиента, который обычно является URL (я прав?). Поэтому мне нужно будет обновить url с параметрами запроса, чтобы сохранить поисковый запрос (/users?username=joe&page=1
).
Что меня смущает, где и когда обновлять URL? Теперь я могу придумать два варианта ниже - и они не кажутся чистыми вообще.
Вариант 1
- Клиент вставляет
joe
во входной элемент и нажимает Поиск. - При нажатии кнопки Поиск выполняется переход из ReactRouter с новыми параметрами запроса (
/users?username=joe&page=1
). - Вид (
Component
) получает новые параметры черезthis.props.params
иthis.props.query
. - Вид (
Component
) запускаетAction
какAction.getUser
в зависимости от параметров запроса, которые он получает - в этом случаеusername=joe&page=1
.
после этого, это то же самое, что и выше
Вариант 2 (только 6 отличается от того, что я объяснил выше)
- Клиент вставляет
joe
во входной элемент и нажимает Поиск. - При нажатии кнопки Поиск запускается
Action
(например, Action.getUser). -
Action
делает запрос на сервер и получает результаты -
Dispatcher
отправляет функцию с полезной нагрузкой результатов кому угодно (обычноStore
) интересуетсяAction
. - Состояние
Store
изменяется с новым результатом, полученным с помощьюAction
- Просмотр (
Component
) повторно отображается, прослушивая изменениеStore
. И как-то (пока не знаю, как) обновляет свой url в зависимости от егоprops
(например,this.props.searchusername
иthis.props.searchpage
)
Какова наилучшая практика обработки параметров запроса? (или это может быть не специфично для параметров запроса) Я полностью недооцениваю дизайн или архитектуру? Заранее спасибо за любую поддержку.
Некоторые статьи, которые я прочитал