Como Criar um Redux do Zero
O Redux é uma biblioteca bastante popular, segundo Mark Erikson em 2018, em seu artigo, Redux — Not Dead Yet!, cerca de 60% das aplicações React usavam Redux, sem contar aplicações em vanilla JavaScript ou em frameworks como Angular e VueJs.
O uso do redux proporciona bastante maleabilidade nas aplicações além de ser um ótimo candidato para implementação da Arquitetura Flux.
Nesse artigo vamos aprender como criar uma versão simplificada dessa biblioteca, também vamos fazer uma aplicação simples pra entendermos seu funcionamento.
Vamos começar criando a nossa Store que é onde mora todo o coração do Redux.
createStore
A nossa função createStore nada mais é que uma factory function que retorna pra gente 3 métodos, getState, dispatch e subscribe. Abaixo vou explicar o que cada parte dessa função faz.
Vamos entender por partes?
state
É basicamente a parte central onde se encontra o nosso objeto contendo os dados da nossa store.
listeners
São nossas funções que são cadastradas pelo método subscribe para serem executadas assim que um dispatch é acionado.
getState()
É o método que usamos para acessar o nosso estado.
dispatch()
É o método responsável por atualizar nossa loja.
subscribe()
É o método responsável por cadastrar nossas funções para que sejam executadas quando o dispatch for acionado. Ele retorna um callback que remove a função cadastrada previamente quando desejamos que algum elemento não receba mais notificações quando o estado da nossa store for alterado.
Agora vamos segunda parte, combineReducers
combineReducers
O CombineReducers é uma função que abstrai a lógica de conectar o rootReducer à sua loja. Ela tem uma cara bem feia porém é muito útil para se escrever menos boilerplate.
Ela na pŕatica transforma seu rootReducer disso
Pra apenas isso
Abaixo deixo um codeSandbox com todo o redux mostrado acima e um projeto bem simples mostrando sua aplicação.
