/plantao-revisao-redux-bloco-16

Repositório para o Plantão de Revisão do Bloco de Redux

Primary LanguageJavaScript

Revisão-redux-bloco-16

Repositório para o Plantão de Revisão do Bloco de Redux, o código original sem o uso do Redux está na branch main.

E a resolução vai ser feita na branch frontendstore-with-redux-turma-X.

Código base

O código já está pronto, e nele temos uma aplicação (fluxos da aplicação) semelhante ao projeto Front End Online Store, contando com:

  • Página de login

    • uma página simples, com um formulário onde o usuário insere o nome e realiza o login.
    • ao realizar o login o usuário é redirecionado a página de listagem

  • Página de listagem de produtos

    • exibe uma lista de computadores, utilizando o endpoint
      https://api.mercadolibre.com/sites/MLB/search?q=$QUERY do mercado livre
    • nessa página é possível adicionar um produto ao carrinho

  • Página de detalhes do produto

    • exibe mais informações do produto
    • nessa página é possível adicionar um produto ao carrinho

  • Página do carrinho

    • exibe todos produtos adicionado no carrinho
    • nessa página é possível remover um produto do carrinho

Objetivo

O objetivo é refatorar a aplicação utilizando o Redux, para isso será necessário instalar as dependências, redux, react-redux, redux-thunk e redux-devtools-extension. Caso queira, utilize essa sugestão de checklist, para guiar o inicio do desenvolvimento do Redux

Checklist do react redux (sugestão)

Antes de começar

  • pensar como será o formato do seu estado global
  • pensar quais actions serão necessárias na sua aplicação

Criar dentro do diretório src:

  • diretório actions;
  • diretório reducers;
  • diretório store.

Criar dentro do diretório actions:

  • arquivo index.js.

Criar dentro do diretório reducers:

  • arquivo index.js.

Criar dentro do diretório store:

  • arquivo index.js.

No arquivo App.js:

  • definir o Provider, <Provider store={ store }>, para fornecer os estados à todos os componentes encapsulados em <App />.

No arquivo store/index.js:

Na pasta reducers:

  • criar os reducers necessários em arquivos separados
  • importar o rootReducer no arquivo index e utilizar os reducers criados

Na pasta actions:

  • criar os actionTypes, por exemplo: const ADD_TO_CART = 'ADD_TO_CART';
  • criar os actions creators necessários

Nos componentes:

  • criar a função mapStateToProps
  • criar a função mapDispatchToProps
  • fazer o connect