Curso de Redux en React

Presentación de los objetivos de esta sección del curso de Redux y Redux Toolkit en la que vamos a construir una aplicación React.

Construimos la estructura del proyecto usando Vite, una poderosa herramienta frontend. Veremos cómo iniciar un proyecto React con Vite. Instalaremos además otras dependencias necesarias para nuestro curso, como la librería de Redux Toolkit o React Redux. Por último instalaremos Axios para las solicitudes HTTP contra nuestra API REST.

Repasamos la estructura de un proyecto generado con Vite para trabajar con React y comenzamos a incorporar los archivos para gestionar el estado con Redux. Sería el archivo de Store y el archivo Todo-Slice para crear la porción del estado que trabajará con Redux. Luego realizamos los imports para trabajar con Redux dentro de React (React-Redux). Finalmente veremos cómo insertar el provider para Redux, de modo que todas las variables del store estén disponibles en los componentes.

En este vídeo vamos a comenzar a trabajar con el slice que nos aportará la funcionalidad de trabajo con el API REST. Primero haremos una pequeña limpieza sobre el código de base que nos trae el template de React de Vite. Luego gestionamos los export e imports del slice de todos y empezaremos a trabajar con el propio slice, creando su estado inicial y declarando los reducers.

En este vídeo vamos a comenzar a desarrollar las interfaces de usuario para esta aplicación, comenzando por el formulario para crear una tarea, el mensaje de carga y la lista de tareas, con cada uno de sus ítem, que verá el usuario con los datos. Ka idea es construir el marcado (HTML), aunque todavía no nos habremos conectado al API REST de "todos" para conseguirlos.

En este vídeo veremos cómo aplicar un poco de CSS a nuestra aplicación para que tenga un aspecto más atractivo.

Comenzamos a mapear las operaciones que la aplicación necesita para realizar todas las acciones que manejarán el estado. Para ello usaremos createAsyncThunk de Redux Toolkit, que nos permite crear las acciones asíncronas. De momento simplemente colocaremos las cabeceras de todos los thunks que necesitaremos para realizar las acciones de acceso al API REST.

Veremos el cuerpo de nuestra primera acción, que traerá los datos de todas las tareas. Se muestra cómo gestionar la solicitud con Axios y delegar en los extraReducer para implementar los distintos tipos de respuestas de las promesas de Axios. Veremos cómo implementar los extraReducers del slice. Veremos los distintos casos de las solicitudes createAsyncThunk (fulfilled, pending y rejectec), y cómo se implementan en los extraReducers.

Veremos cómo se usa el useDispatch que nos aporta React Redux para disparar las acciones. Veremos también cómo se accede al store y sus distintas propiedades con useSelector, también de React Redux. Veremos cómo usar los distintos elementos del estado en la UI creada anteriormente.

Comenzamos por programar la acción de post del formulario para crear la tarea. Esta parte la hacemos primero con Axios. Luego gestionamos las respuestas asíncronas de las promesas de Axios a través de los case de los extraReducers. Además incorporaremos los comportamientos de React para que nuestra aplicación permita acceder a los valores del formulario y crear los objetos de datos cargados por los usuarios.

De manera similar al vídeo anterior, veremos cómo realizar toda la operativa con la acción asíncrona que nos permita actualizar una tarea. Se verá cómo realizar el thunk, la operativa HTTP por Ajax de Axios, los extraReducers y sus case de los createAsyncThunk y el acceso a los datos del formulario por los procedimientos comunes que nos aporta React con sus hooks estándar.

Realizaremos la acción de borrar una tarea con Redux, Redux Toolkit y Axios. Usando el conocimiento de vídeos anteriores resultará muy sencillo y rápido.

Cómo hacer la funcionalidad para marcar y desmarcar una tarea como completada, usando todos los mecanismos de Redux tratados en vídeos anteriores.

Unas breves conclusiones sobre la sección presente con las bases del uso de Redux y Redux Toolkit en aplicaciones React.

En este vídeo vamos a explicar el enfoque de este bloque del curso, en el que pretendemos demostrar que los comportamientos de actions, thunks y el propio store de Redux los puedes usar en cualquier tipo de aplicación, independientemente de si estás trabajando con React o con otro framework de vistas o componentes.

En este vídeo mostraremos una aplicación de React que da servicio de autenticación de usuarios por medio de tokens JWT y actions creadas con Redux y Redux Toolkit. Estos servicios de autenticación basados en Redux ya habían sido programados en el Curso Práctico de Redux y Redux Toolkit. Simplemente los estamos integrando ahora en una aplicación React, sin necesidad de tocar una línea de código de lo que se había desarrollado con Redux.

Este vídeo lo puedes considerar un extra en el que veremos que también somos capaces de integrar componentes de utilidad desarrollados en el Curso Práctico de Redux y Redux Toolkit (Custom Elements del estándar Web Components, basados en Lit). Esos componentes se pueden usar perfectamente con React y, como están conectados directamente con el store de Redux, no necesitan ningún tipo de integración para hacerlos funcionar en React, por lo que resulta prácticamente inmediato, simplemente colocar sus imports y el código de uso del componente Lit en la vista de React. Ellos son capaces de funcionar de manera muy autónoma y ofrecer el servicio de mostrar mensajes de feedback y mensajes de la típica ruedita de "loading".