Esse é um projeto bonus do bootcamp Ignite da Rockseat para ensinar como o Redux é utilizado em aplicações React.
É uma aplicação simples para simular as ações de um carrinho de compras em um ‘e-commerce’.
Foi utilizado o json-server para simular o banco de dados a partir do arquivo server.json
Para inicializar o servidor, basta executar o comando:
yarn server
Em seguida, em outro terminal, execute o comando:
yarn start
Para o consumo dos dados globais da aplicação armazenados em um estado do Redux, é necessário indicar para o 'Provider' qual será o 'store' que será utilizado.
Provider foi inicializado aqui.
O 'store' é um objeto que armazena todo estado da aplicação. O store foi criado aqui.
A única forma de alterar o estado é disparando uma 'ação'.
Para manter boas práticas e deixar a aplicação escalável, foi criado os módulos e implementado as 'actions', 'reducers' e 'sagas' do módulo de carrinho.
Para alterar os dados do estado, é necessário dar um dispatch na action (adicionar ou remover um produto do carrinho, por exemplo). As actions contém as informações do payload, que seria a nova informação do estado e o type, que é o nome da ação.
- No reducer é onde acontece a lógica de alteração do estado.
- Nele é definido o que acontece quando uma ação é disparada.
- Recebe como parâmetro o estado anterior e a action disparada (que contém o payload e o type).
- É um módulo que permite que a aplicação seja executada em paralelo, como um middleware.
- Na aplicação ele foi utilizado para fazer a checagem de estoque do produto adicionado ao carrinho.