Как обрабатывать параметры запроса в реакции + реакция-маршрутизатор + поток

Я пытаюсь заменить приложение 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)

Какова наилучшая практика обработки параметров запроса? (или это может быть не специфично для параметров запроса) Я полностью недооцениваю дизайн или архитектуру? Заранее спасибо за любую поддержку.

Некоторые статьи, которые я прочитал

ОТВЕТЫ

Ответ 1

Не совсем уверен, что вы подразумеваете под

это означает, что мне нужно будет обновить URL-адрес, чтобы сохранить информацию (/users? username = joe & page = 1).

Вероятно, у вас будет аналогичная структура.

TopContainer.jsx - Users.jsx   - список User.jsx

Обычно TopContainer будет наблюдать за всеми магазинами, и если что-то изменится, перейдите к users.jsx. Таким образом, в User.jsx вы можете просто визуализировать this.props.users, не беспокоясь о какой-либо репрезентации.

Действия пользователей поиска обычно происходят в событии компонента TopContainer компонентаWillMount, и страница будет прослушивать UserStore. Это хорошее место для ввода любых параметров запроса. Что-то вроде этого будет работать

  componentWillUnmount() {
    let searchTerm = router.getCurrentQuery().searchTerm;
    UserActions.searchUsers(searchTerm)
  },

На страницу все равно, есть ли у url параметры запроса или нет, он просто тупо показывает, что в магазине пользователя.

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

Ответ 2

Я считаю, что лучшей практикой является кнопка отправки, только задающая запрос местоположения (имя пользователя). Остальное должно быть учтено основным компонентом реакции, который назначается как компонент маршрутизатора. Таким образом, вы можете быть уверены, что в любое время, когда кто-либо пересматривает или распространяет URL-адрес, они могут получать одинаковые результаты. И это тоже очень общее.

Что-то вроде этого:

let myQuery = this.props.location.query;
if (myQuery.username) {
  let theUser = myQuery.username;
  this.setState({
    userName = myQuery.username
  });
} else {
  this.setState({
    userName = false //Show All
  });
}

И затем используйте это состояние "userName" для отправки на сервер для поиска. Таким образом, вам не потребуется повторять код компонента, который заботится о перечислении пользователей, поскольку сервер уже отправляет соответствующие данные.

В моем опыте использования запросов местоположения в React я был очень доволен их циклами реактивности и производительностью. Я бы настоятельно рекомендовал поддерживать каждое другое состояние приложения в соответствии с URL.