Links úteis utilizados para este estudo:
As actions são objetos que devem ter um type para indicar o tipo da ação que está sendo executada.
Os reducer são funções que devem ser puras, e que especificam como o estado da aplicação deve ser atualizado.
Basicamente, os reducers são onde os estados do Redux deve estar.
Sempre deve ter um retorno default do estado caso a action não seja encontrada
Não é recomendado: >
- Realizar chamadas a API;
- Chamar funções não puras comoDate.now()ouMath.random();
- Mudar os seus argumentos.
A store é a loja da aplicação, e é um objeto que reúne a action e o reducer, para a criar a store é necessário a utilização da função createStore do Redux.
Não é necessário ter mais de uma loja na aplicaçao!
O fluxo de dados do Redux é baseado em Fluxo de dados unidirecional estrito que faz com que todos os dados da aplicação sejam tratados da mesma forma, o que torna a lógica da aplicação mais previsível!
Links úteis para estudo:
⚠️ A Aplicação de exemplo de TO-DO list criado na documentação do Redux, tem algumas diferenças do que é usado na do React Redux.
Componente do React Redux que provê para o componente que é envolvido nele os estados do Redux.
Recomendado envolvê-lo no componente
<App />, fazendo com que todos os componentes criados futuramente tenha acesso ao estado do Redux.
O connect é uma função do React Redux bastante performática e que permite com que um componente seja conectado à uma parte específica da arvore de estados do Redux.
função que mapeia os estados de determinadas parte da arvores de estados do Redux para as propriedades do componente.
Função que mapeia o método dispatch para as propriedades do componente, permitindo que ele dispare as actions para os reducers.
_ Container _ - Onde toda a regra do componente deve estar. Tais como comunicação com o Redux para ler e setar novos estados.
_ Components _ - Onde toda a parte visual da aplicação deve estar e onde a conexão com o Redux deve ser somente de leitura.
O Redux não é exclusivo de algum framework, na verdade ele pode ser usado com qualquer framerwork JavaScript.
Links úteis para estudo: https://www.npmjs.com/package/redux-persist#basic-usage
Essa lib serve para persistir os states do Redux em localstorage.
Isso é possível por duas funções que a própria lib oferece, persisReducer e persistStore.
Também é possível adicionar uma "whitelist" para liberar apenas um objeto da store a ser persistido. E da mesma formaé possível também adicionar uma "blacklist" para que todos os objetos da store sejam adicionados, menos o informado.