Paso 4

Enfoque en involucrar la lógica de Redux en una aplicación React. Conectar los componentes de React y la tienda de Redux para habilitar la gestión de estado y acciones.

Ejemplo

Aplicación de Seguimiento de Barcos

Desafío

Form.jsx:

1. Abrir el archivo Form.jsx.
2. Importar el hook useDispatch del paquete react-redux. Este hook se utilizará para enviar acciones a la tienda de Redux.
3. Importar la acción addGoal del archivo goalAction.js. Esta acción es responsable de agregar un objetivo a la tienda de Redux.
4. Inicializar la variable dispatch dentro del componente llamando al hook useDispatch.
5. Completar la función handleFormSubmit enviando la acción addGoal. Utilizar la función dispatch y pasar un objeto con los detalles del objetivo: { id: Date.now(), text: goal }. Date.now() genera un ID único para cada objetivo.
6. Restablecer el formulario después del envío llamando a la función resetForm.

GoalList.jsx:

1. Abrir el archivo GoalList.jsx.
2. Importar los hooks useDispatch y useSelector desde el paquete react-redux. Estos hooks se utilizarán para acceder al store de Redux y despachar acciones.
3. Importar la acción removeGoal desde el archivo goalAction.js. Esta acción es responsable de eliminar una meta del store de Redux.
4. Inicializar la variable goals utilizando el hook useSelector y acceder al estado goals del store de Redux.
5. Inicializar la variable dispatch llamando al hook useDispatch.
6. Completar la función handleRemoveGoal despachando la acción removeGoal. Pasar la goal como parámetro.
7. Finalizar la lógica de renderizado del arreglo de metas utilizando el método goals sobre el arreglo onClick y renderizando cada meta.
8. Mostrar el texto de cada meta y agregar un botón con un evento handleRemoveGoal que llame a la función goal y pase la meta correspondiente.

1. Utilizar los hooks useDispatch y useSelector para acceder al store de Redux y despachar acciones.
2. Trabajar con las acciones removeGoal y addGoal de goalAction.js para gestionar acciones relacionadas con las metas.
3. Asegurar que el payload de la acción addGoal incluya un id único generado usando Date.now() y el valor de texto del campo de entrada.
4. Implementar la función handleRemoveGoal para despachar la acción removeGoal con la meta correspondiente.
5. Utilizar la función map para iterar sobre el arreglo goals y renderizar cada meta, mostrando su texto.