Blog: Redux

Redux

Image without description

Foi inevitável aprender Reactjs e não olhar para o Redux.

Redux é uma biblioteca que gerencia estados em uma aplicação. Tirando a responsabilidade de um componente ter um estado que poderá ser usado por vários outros componentes dentro da sua aplicação por um objeto global.

O Redux cria um objeto global contento todos os estados que precisam ser acessados por diversos componentes que não se ligam.

Image without description

Componentes do Redux

Store: Nesse objeto que você vai guardar todos os estados que serão usados globalmente na sua aplicação. Quando um component precisar ler um estado, ele vai consultar o store;

Actions são ações que serão enviadas do seu component para acionar os Reducers. Ele serve apenas para informar qual função deverá rodar e qual é o dado que ela vai usar como parâmetro;

MiddleWares vão fazer toda a lógica necessária com o dado que será alterado no estado, dentro do Store.

Reducers Após o MiddleWare tratar os dados, os Reducers despacham esses dados para o reducer informar ao Store que o state foi alterado, e os demais componentes que precisarem usar esse novo estado são notificados;

Estrutura dos arquivos do Redux com Reactjs podem ser encontrados na pasta chamada store, dentro dessa pasta ficam os States, Reducers, MiddleWares e Actions.

Image without description

A estrutura dos middlewares é composta por funções que retornam outras funções.

getState: É uma função que será responsável por acessa um estado global da store;
dispatch: vai mandar o novo estado já tratado para o reducer pelas actions;
createStore: Função responsável por criar a store em si, é essa função que deixando todos os estados globais;
combineReducers: Cria um objeto com todos os estados e faz a ligação com os reducers para que a store guarda-los;
applyMiddleware: Intercepta as actions antes de chegar ao reducer para fazer toda a lógica;

Outro ponto importante é importando um Provider da biblioteca react-redux. Permitindo que os componentes tenham acesso a store.

Se você ouviu falar em Redux, também ouviu falar em hooks, que são os manipuladores de estados no seu componente.

useDispatch: Usado nos componentes para acionar os middlewares.
useSelector: função para acessar os nossos objetos com todos os estados da nossa store.

Esse post é um rascunho de um trabalho feito para eCommerce, por isso você deve ter reparado em alguns detalhes incomuns.