Comienza con RedUX Thunk

[dieciséis]

Hay dos partes a este proyecto: el sitio de la parte delantera y el servidor de la parte posterior que se ejecutan. Mientras el tutorial se enfoca en la parte delantera, necesitamos un servidor que se ejecuta para buscar las fotos. Descargue los archivos del proyecto e instale las dependencias tanto para el sitio como para el servidor. Ejecute los servidores para ambos y déjelos corriendo en el fondo.

 / * Un terminal interior / sitio * /
& gt; hilo
& gt; inicio de hilo
/ * Un terminal interior / servidor * /
& gt; hilo
& gt; inicio de hilo 

02. Configurar middleware

Redux Thunk es un middleware - Funcionalidad que se encuentra entre acciones y reductores que pueden cambiar cómo se comportan esas acciones. REDUX admite múltiples conjuntos de middleware que cubren toda la aplicación. Se agregan cuando la tienda se crea usando el componer método. Agregar middleware a la createstore Método dentro de index.js.

 Importar {applymiddleware, componer}
de "REDUX";
Importar Thunk de "Redux-Thunk";
[...]
Const Store = CreateStore (
rootreducer,
componer(
applymiddleware (thunk),
devueta
)
); 

03. Configurar creadores de acción

Lo primero que debemos hacer ahora es cargar las fotos en la galería. Al igual que las acciones regulares, necesitamos creadores de acción para los distintos estados que tomará una llamada asíncrona. La mayoría tendrá comienzo De éxito y error comportamiento. Estos deja que Redux sepa lo que el JavaScript está ocupado. Dentro de Acciones / fotos / fotos.js , establecemos tres creadores de acción para estos diferentes estados.

 Exportar const loadgallerystart = () = & gt; ({
Tipo: Load_gallery_start});
exportar const loadgallerysuccess =
Fotos = & gt; ({
Tipo: Load_Gallery_Success,
fotografías
});
Exportar Const LoadGalleryError = () = & gt; ({
Tipo: Load_gallery_error}); 

04. Crea un tramo para cargar

Thunks trabaja exactamente lo mismo que los creadores de acción. Todavía enviamos el valor de retorno, pero esta vez devuelve una función en lugar de un objeto. El middleware que configuramos anteriormente pasará un método de despacho a la función devuelta. Esto nos permite enviar más acciones a REDUX después del envío inicial. Crear un loadgallery Método que devuelve una función. Por ahora, haga que envíe una acción para mostrar que la galería sigue cargando.

 Exportar Const LoadGallery = () = & gt;
Despacho = & gt; {
Despacho (LoadGalleryStart ());
}; 

05. Cargar datos del servidor

Ahora estamos listos para comenzar a buscar al servidor que configuramos al principio. Podemos hacer esto usando axios - Un paquete diseñado para trabajar con promesas en diferentes navegadores. Importar axios y hacer una solicitud de las fotos dentro loadgallery . Si la promesa resuelve, despacha la acción de éxito, y si no despacha la acción de error. Con eso, la estructura del Thunk está completa.

 Importar axios de "Axios";
[...]
Axios de regreso
.get ("http: // localhost: 3001 / fotos")
.Ten (respuesta = & gt; envío (
loadgallerysuccess (respuesta.data)))
.catch (() = & gt; Despacho (
LoadGalleryError ())); 

06. Despacho el tragoto

El Thunk no hará nada hasta que se haya enviado. Podemos hacerlo dentro de un componente de reacción como cualquier otra acción. Un buen momento para comenzar a cargar las fotos es cuando el usuario ve la galería principal. Podemos usar reaccion componentdidmount Método de ciclo de vida como un gatillo, después de revisar la galería aún no está cargada. Dentro de Componentes / Contenedor / Galería / Gallery.js despacho a loadgallery acción al agregarlo a mapdispatchtoprops y llamándolo dentro componentdidmount .

 ComponentDidMount () {
Si (! este.props.Props.Pointed) {
este.props.loadgallery ();
}
}
Exportar const mapdispatchtoprops =
 Despacho = & gt; ({
LoadGallery: () = & gt;
Despacho (LoadGallery ()),
}); 

07. Añadir fotos en el éxito

Cuando las fotos vuelven del servidor, enviamos un Load_gallery_success Acción con las fotos. Necesitamos conseguirlo en el estado a través de la fotografías reductor. Dirigirse a Reductores / Fotos / Photos.js y agregar un caso para la acción de éxito. La carga útil contiene todas las fotos como una matriz. Una vez que se actualiza el estado, el selector de fotos pasa las fotos a través del componente de la galería a mostrar.

 Caso Load_Gallery_Success:
Devuelve Acción.photos; 

08. Configure la UI

Actualmente, las fotos aparecen de repente después de que se carguen. En una conexión más lenta, el usuario estará mirando una pantalla en blanco hasta que finalice la solicitud, si alguna vez lo hace. Las acciones que enviamos a las fotos de carga también se pueden recoger en el reductor de la UI para mantener la interfaz actualizada con lo que está sucediendo. Actualice las banderas de carga y error dentro del reductor de UI en reductores / ui / ui.js .

 Caso Load_Gallery_Error:
volver {... estado,
Cargando: Falso, Error: True};
caso load_gallery_start:
volver {... estado,
Cargando: VERDADERO, ERROR: FALSO};
CASO DESGO_GALLERY_SUCCESS:
volver {... estado,
Cargando: Falso}; 

09. Agregue el selector de carga y error

Al igual que con las fotos de la galería, necesitamos que los selectores obtengan los diversos valores de los estados de la UI de REDUX. Podemos pasarlos a la galería, que luego renderizará elementos diferentes si uno es cierto. En Selectores / ui / ui.js , agregue un par de funciones para obtener los valores.

 Exportar Const IsgalleryErrored =
 estado = & gt; State.ui.Error;
Exportar const isgalleryloading =
 estado = & gt; State.ui.loading; 

10. Añadir datos a GalleryContainer

Con los selectores listos, ahora se pueden agregar a la Galería Componente de contenedor. Agregarlos aquí significa que el componente responsable de mostrar la galería no necesita saber cómo llegó los datos. Dirigirse a Contenedor / Galería / Galería.js y agregar los selectores a mapstateetoprops . Haga constantes para los valores para ayudar a mostrar el estado en el siguiente paso.

 Const {error, carga,
 fotos} = esto.props;
[...]
exportar const mapstateetoprops =
 estado = & gt; ({
ERROR: ISGalleryErrored (estado),
Cargando: isgalleryloading (estado),
 }); 

11. Mostrar el estado de carga y error.

Si bien tenemos el error y cargando los accesorios, actualmente no hay interfaz de usuario para indicar cuándo están activos. Estos accesorios son valores booleanos, lo que significa que podemos alternar la visualización de los componentes cuando son verdaderos. Actualice el método de render para asegurarse de que el & lt; error & gt; y & lt; cargando & gt; Los componentes rinden en lugar de la galería cuando sea necesario.

 if (error) {
devolución y lt; error / & gt ;;
}
Si (carga) {
return & lt; cargando / & gt ;;
} 

12. Vuelve a buscar la galería

Con la galería cargada, podemos pasar a una foto individual. Al hacer clic en cualquiera de las fotos y actualizar la página no cargan la foto de nuevo, ya que no hay instrucciones en esta página aún para cargar la galería. Abierto Contenedor / Foto / Foto.js y cargar la galería en componentdidmount como en el Galería componente. los descarado El cheque no intentará cargar las fotos nuevamente si ya estaban cargadas dentro de la galería.

 Si (! Este.props.photoscarde) {
este.props.loadgallery ();
} 

13. Añadir un nuevo comentario

El usuario puede hacer clic en la foto donde quieren dejar un comentario. El componente de presentación de fotos ejecutará el AddNewcomment función de apoyo cuando esto sucede. Dentro de AddNewcomment Función, calcule el punto donde el usuario ha hecho clic en la foto. El servidor requiere un valor de porcentaje de enteros redondos cuando se guarde.

 Const Photo = E.Target
 .GetDeboundingClientRect ();
const top = e.clientx - photo.left;
const izquierd = e.clienty - photo.top;
const toppc = math.round ((arriba /
 photo.width) * 100);
const illipppc = math.round ((izquierda /
 photo.height) * 100); 

14. Dile a Redux sobre el comentario.

Con la posición calculada, debemos decirle a REDUX sobre el comentario para que pueda mostrar el formulario de comentarios. Ya hay una acción configurada para agregar el nuevo comentario en la pantalla. Agregar AddNewcomment en mapdispatchtoprops y llámelo después de calcular la posición del clic.

 este.Props.AddNEwcomment (
 TopPC, IZQUIERDO);
[...]
Exportar const mapdispatchtoprops =
 Despacho = & gt; ({
AddNewcomment: (arriba, izquierda) = & gt;
Despacho (AddNewcomment (arriba, izquierda)),
});

15. Dile una foto sobre el nuevo comentario.

Cuando se pasa la nueva información de comentarios a REDUX, debemos pasarlo al componente de presentación de fotos. Esto le permite mostrar el formulario en esa posición. Encuentra el Recibo selector, agregarlo a mapstateetoprops y pasar el apoyo en & lt; foto y gt; .

 Exportar Const MapStateTopops =
 (Estado, Props) = & GT; ({
Recién comentario: GetNewcomment (estado),
});
& lt; foto [...] recién comentario = {
 este.Props.newcomment} / & gt; 

16. Llame a Thunk en comentario

Al hacer clic en la foto ahora traerá el nuevo formulario de comentarios. Este es su propio componente conectado. Cuando se envía el formulario, llama a un enviar comentario Función de apoyo y se pasa. Este es un trounk que haremos. Abrir Contenedor / Recién Comborno / Newcomment.js y agregar el trazador a mapdispatchtoprops . Pase ese apoyo en el componente de presentación renderizado.

 & lt; recién [...]
 PRESENTACIÓN = {PRESENTANDO} / & GT;
Exportar const mapdispatchtoprops =
 Despacho = & gt; ({
PRESENTE: COMENTARIO = & GT; envío(
recompensa (comentario))
});

17. Reúne contenido para Thunk

El Thunk para agregar un nuevo comentario tiene una estructura similar a la recuperación de la galería, incluida una acción de inicio, éxito y error. Hay un argumento adicional que se pasa a este traqueo: el estancamiento función. Esto permite el acceso directo al estado actual para obtener datos de él. Crear el enviar comentario tragarse Acciones / Recién Comborno / Newcomment.js . Cada comentario está asociado con una foto y un usuario. Para este tutorial, la ID de usuario está codificada por el usuario reductor.

Exportar Const Submitcomment = Comentario
 = & gt; (Despacho, GetState) = & gt; {
Despacho (envíoComensión ());
const currentphoid =
getcurrentphoid (getstate ());
const user =
getcurrentuser (getstate ());
const {izquierda, top} =
Recibir nuevo (GetState ());
}; 

18. Publicar la solicitud.

Con todos los datos necesarios en su lugar, podemos enviar el comentario. Axios tiene un correo método para lidiar con CORREO Las solicitudes, con el segundo argumento siendo los datos para enviar esa solicitud. Agregue la solicitud al Thunk, pasando datos en el caso de serpiente para que coincida con lo que espera el servidor.

 Axios de regreso
.correo(
"http: // localhost: 3001 / comments", {
user_id: user.id,
Photo_ID: CurrentPhotoide,
comentario,
izquierda,
cima
}) 

19. Manejar el éxito y el error.

Si la promesa de Axios resuelve o rechaza, debemos decirle la solicitud al respecto. Si se resuelve correctamente, el servidor pasará el contenido del comentario. Deberíamos pasar eso con la acción de éxito. Si se rechaza, dispara una acción de error. Actualizar la promesa con entonces y captura bloques.

. Entonces (({DATOS: {
 ID, comentario, izquierda, arriba}}) = & gt;
envío(
subvenciones
Identificación, comentario, izquierda, arriba,
Usuario, CurrentPhotoides)
)
)
.catch (() = & gt; Despacho (
 repartidor ())); 

20. Añadir comentario a la foto

En este momento, una vez que se agrega el comentario con éxito, se borra de la pantalla, pero no está visible hasta que la página se actualice. Podemos actualizar las fotos Reducer para recoger en el nuevo comentario y agregarlo a su matriz de comentarios, para mostrar como el resto de ellos. Abra el reductor / fotos / fotos.js y agregue un caso para manejar la acción. Cree una copia del estado para asegurarse de que no mutamos accidentalmente el estado existente.

 Submit_comment_success:
const {id, comentario, top, izquierda,
usuario, photoid} = acción.payload;
Const NewState = JSON.Parse (
JSON.Stringify (estado));
const photo = newstate.find (
photo = & gt; photo.id === photoid);
foto.comments.push ({
Identificación, comentario, izquierda, arriba, usuario
});
Devolver NewState; 

21. Ocultar otros comentarios

Por último, si otro comentario está abierto y el usuario quiere agregar un nuevo comentario, la interfaz de usuario se apaga demasiado. Deberíamos ocultar el cuadro de comentarios si se está compuesto un nuevo comentario. Podemos engancharlos a los existentes. Add_new_comment acción para despejar el comentario valor. Dirigirse a reductor / ui / ui.js y agregar un caso para eso.

 Caso Add_New_comment:
regreso {
...Expresar,
commentopen: indefinido
}; 

Este artículo se publicó originalmente en cuestión 283 de la revista Creative Web Design Design Diseñador web . Comprar emito 283 aquí o Suscríbete al diseñador web aquí .

Artículos relacionados:

• 5 APIES ANTES DE JAVASCRIPT
• Desarrollar componentes reaccionales reaccionables.
• 9 de los mejores marcos de JavaScript