reactjs - react - Cómo lidiar con los parámetros de consulta en reaccionar+reaccionar enrutador+flujo

react-router-dom redirect

Question

Estoy tratando de reemplazar una aplicación Backbone.Marionette para reaccionar y tengo dificultades para pensar en los parámetros de consulta. Creo que me falta una paz realmente simple para entender este patrón, así que me disculpo si esta pregunta es totalmente absurda. Apreciaría cualquier ayuda o simplemente me indicaría alguna dirección en la que pueda buscar Google más específicamente.

Hay una página /users que enumera usuarios y puede filtrarlos a través de la barra de búsqueda. Por lo tanto, si desea filtrar los usuarios que contienen ''joe'' en su nombre de usuario, haría una solicitud al servidor con parámetros de consulta como /users?username=joe . Además, también puedo paginar agregando un parámetro de page ( /users?username=joe&page=1 ).

Si solo pienso en la funcionalidad, el flujo probablemente sería

1. El Cliente inserta joe en el elemento de entrada y hace clic en Buscar .
2. Al hacer clic en el botón Buscar se activa una Action (como Action.getUser).
3. La Action realiza una solicitud al servidor y recibe los resultados.
4. El Dispatcher envía una función con la carga útil de los resultados a quien (en general, la Store ) está interesado en la Action .
5. El estado de la Store cambia con el nuevo resultado recibido por la Action
6. La Vista ( Component ) se vuelve a reproducir al escuchar el cambio de la Store .

y funciona como se esperaba. Sin embargo, me gustaría que el Cliente pueda marcar el resultado filtrado actual y poder volver a la misma página más tarde. Esto significa que necesitaré un lugar para guardar información explícita sobre el término de búsqueda que hizo el Cliente, que suele ser la URL (¿tengo razón?). Así que tendré que actualizar la URL con los parámetros de consulta para guardar el término de búsqueda ( /users?username=joe&page=1 ).

Lo que estoy confundido es ¿dónde y cuándo actualizar la url? Lo que puedo encontrar ahora mismo son las 2 opciones a continuación, y no parecen estar nada limpias.

Opción 1

1. El Cliente inserta joe en el elemento de entrada y hace clic en Buscar .
2. Al hacer clic en el botón Buscar se activa una transición del ReactRouter con los nuevos parámetros de consulta ( /users?username=joe&page=1 ).
3. La Vista ( Component ) recibe los nuevos parámetros a través de this.props.params y this.props.query .
4. La Vista ( Component ) Action.getUser una Action como Action.getUser dependiendo de los parámetros de consulta que recibe, en este caso username=joe&page=1 .

Después de esto, es lo mismo que arriba.

Opción 2 (solo 6 es diferente de lo que expliqué anteriormente)

1. El Cliente inserta joe en el elemento de entrada y hace clic en Buscar .
2. Al hacer clic en el botón Buscar se activa una Action (como Action.getUser).
3. La Action realiza una solicitud al servidor y recibe los resultados.
4. El Dispatcher envía una función con la carga útil de los resultados a quien (en general, la Store ) está interesado en la Action .
5. El estado de la Store cambia con el nuevo resultado recibido por la Action
6. La Vista ( Component ) se vuelve a reproducir al escuchar el cambio de la Store . Y de alguna manera (no sé cómo, todavía) actualiza su url dependiendo de sus this.props.searchusername (como this.props.searchusername , y this.props.searchpage )

¿Cuál es la mejor práctica para manejar los parámetros de consulta? (o esto puede no ser específico para los parámetros de consulta) ¿Estoy malinterpretando completamente el patrón de diseño o la arquitectura? Gracias de antemano por cualquier apoyo.

Algunos articulos que he leido

• ¿Alguna forma de obtener parámetros actuales o consultas actuales desde el enrutador (fuera del componente)?
• Datos asíncronos y almacenes de flujo.
• Facilita la adición de parámetros de consulta.
• Reactivar parámetros de enrutador y de consulta arbitraria: ¿La página se actualiza involuntariamente en la carga?
• ¿Agregar parámetros predeterminados?

Answer 1

Consideraría que la mejor práctica es el botón de envío que solo establece la consulta de ubicación (nombre de usuario). El resto debe ser cuidado por el componente de reacción principal que se asigna como componente de enrutador. De este modo, puede estar seguro de que, en cualquier momento en que uno vuelva a visitar o comparta la URL, pueden obtener los mismos resultados. Y esto también es muy genérico.

Algo como esto:

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
  });
} 

Y luego use este estado "userName" para enviar al servidor para buscar. De esta manera, no necesitará iterar el código del componente que se encarga de enumerar a los usuarios, ya que el servidor ya envía los datos relevantes.

En mi experiencia con el uso de consultas de ubicación en React, he estado muy contento con sus ciclos de reactividad y rendimiento. Recomiendo encarecidamente mantener cada estado de aplicación diferente en relevancia con la url.

Answer 2

No estoy completamente seguro de lo que quieres decir con

esto significa que necesitaré actualizar la url para guardar la información (/ users? username = joe & page = 1).

Probablemente tendrás una estructura similar a esta.

TopContainer.jsx - Users.jsx - una lista de User.jsx

Por lo general, TopContainer observará todas las tiendas y, si algo cambia, transmítalo a users.jsx. De esa forma, en Users.jsx, simplemente puede representar this.props.users sin tener que preocuparse por ninguna devolución.

Las acciones de búsqueda de usuarios usualmente ocurren en el evento componentWillMount de TopContainer, y la página escuchará UserStore. Ese es un buen lugar para lanzar cualquier params de consulta. Algo como esto funcionaría

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

A la página realmente no le importa si la URL tiene parámetros de consulta o no, simplemente muestra lo que hay en el almacén del usuario.

Luego, cuando la búsqueda finalice, Users.jsx se volverá a cargar y mostrará los resultados correctos.