reactjs - and - react native flux
¿Cuándo usar Flux(etc.) con Reaccionar? (1)
He estado trabajando en una aplicación React bastante simple como un proceso de aprendizaje, y quiero comenzar a incorporar Flux (o, más probablemente, Redux) para continuar la educación.
El código para implementar una solución parecida a Flux parece bastante sencillo, pero no estoy muy claro cuándo es apropiado y cómo deberían organizarse las cosas en el mejor de los casos.
En términos ultra sencillos, mi mejor estimación en un caso de uso común es que Flux permite que los componentes se comuniquen entre sí sin tener que pasar props comunes, así que con esto en mente, aquí hay un ejemplo de algo que espero usar Flux en mi aplicación:
Digamos que tengo un componente de perfil de usuario que periódicamente se actualiza a través de una llamada ajax. Mientras esta llamada está esperando a que se devuelvan sus datos, un gif de carga de giros se muestra en otra parte de la página, no en un elemento primario o secundario del componente que activa la llamada ajax. En este escenario, ¿cómo usaría Flux para solicitar que el dispositivo giratorio se visualice / oculte en los momentos apropiados (es decir, comience con la solicitud enviada, finalice cuando se reciba una respuesta)? Si su visibilidad fue definida por el estado del componente de perfil, es fácil, pero obviamente necesito un componente para comunicarme con lo que supongo que podría llamar un primo lejano.
¿Cómo describiría mis acciones, reductores y otras cosas para lograr esto?
No estoy buscando a nadie para escribir código para mí aquí, ya que definitivamente aprenderé mejor al hacerlo, pero definitivamente agradecería algunos consejos generales sobre la metodología que se utilizará en tal situación.
¡Muchas gracias!
Redux básicamente le proporciona un estado global en el que cualquier componente puede engancharse.
Entonces para tu llamada ajax tendrías 3 acciones. Consulte los documentos de Redux para crear acciones asíncronas .
GET_USER_PROFILE_START
GET_USER_PROFILE_SUCCESS
GET_USER_PROFILE_ERROR
Entonces tendrás reductores para
userProfile
isUserProfileLoading
Cuando GET_USER_PROFILE_START su solicitud de Ajax, su acción asíncrona disparará primero su acción GET_USER_PROFILE_START , que será recogida por su reductor isUserProfileLoading y establecerá isUserProfileLoading en true .
Luego, cuando la solicitud vuelva, si tiene éxito, GET_USER_PROFILE_SUCCESS con una carga de userProfile . Su userProfile reducer recibirá userProfile y lo establecerá en estado.
Su reductor isUserProfileLoading también escuchará GET_USER_PROFILE_SUCCESS y establecerá que isUserProfileLoading vuelva a ser false cuando vea esa acción.
Si su solicitud falla, GET_USER_PROFILE_ERROR una acción GET_USER_PROFILE_ERROR con una carga de error y realiza algún tipo de notificación en la interfaz de usuario. Y su reductor isUserProfileLoading también escuchará GET_USER_PROFILE_ERROR y también establecerá que isUserProfileLoading vuelva a ser false cuando lo vea.
Ahora, cualquier componente de su aplicación, sin importar dónde se encuentre en la página o en la jerarquía de componentes, puede ver isUserProfileLoading y renderizar un spinner de carga si está configurado en true .
Espero que ayude.