Etapa 4

Foco em envolver a lógica do Redux em uma aplicação React. Conectar componentes React e o store do Redux para possibilitar o gerenciamento de estado e ações.

Exemplo

Aplicativo de Rastreamento de Navios

Desafio

Form.jsx:

1. Abra o arquivo Form.jsx.
2. Importe o hook useDispatch do pacote react-redux. Este hook será utilizado para despachar ações para o store do Redux.
3. Importe a ação addGoal do arquivo goalAction.js. Esta ação é responsável por adicionar uma meta ao store do Redux.
4. Inicialize a variável dispatch dentro do componente chamando o hook useDispatch.
5. Complete a função handleFormSubmit despachando a ação addGoal. Utilize a função dispatch e passe um objeto com os detalhes da meta: { id: Date.now(), text: goal }. O Date.now() gera um ID único para cada meta.
6. Redefina o formulário após o envio chamando a função resetForm.

GoalList.jsx:

1. Abra o arquivo GoalList.jsx.
2. Importe os hooks useDispatch e useSelector do pacote react-redux. Esses hooks serão utilizados para acessar o store do Redux e despachar ações.
3. Importe a ação removeGoal do arquivo goalAction.js. Essa ação é responsável por remover uma meta do store do Redux.
4. Inicialize a variável goals utilizando o hook useSelector e acesse o estado goals do store do Redux.
5. Inicialize a variável dispatch chamando o hook useDispatch.
6. Complete a função handleRemoveGoal despachando a ação removeGoal. Passe a goal como parâmetro.
7. Finalize a lógica de renderização do array de metas utilizando o método map sobre o array goals e renderizando cada meta.
8. Exiba o texto de cada meta e adicione um botão com o evento onClick que chama a função handleRemoveGoal passando a respectiva goal.

1. Utilizar os hooks useDispatch e useSelector para acessar o store do Redux e despachar ações.
2. Trabalhar com as ações removeGoal e addGoal do arquivo goalAction.js para manipular ações relacionadas às metas.
3. Garantir que o payload da ação addGoal inclua um id único gerado com Date.now() e o valor de texto do campo de entrada.
4. Implementar a função handleRemoveGoal para despachar a ação removeGoal com a meta correspondente.
5. Utilizar a função map para iterar sobre o array goals e renderizar cada meta, exibindo seu texto.