Uma nova esperança — Redux e Redux-Saga

Controlando side-effects em React e React-Native

Image for post
Image for post
May the force be with you!

Eu realmente amo os princípios que eu aprendi depois de mudar do Angular para React, e logo depois, toda a arquitetura Flux. No momento, eu estou trabalhando em uma aplicação para um cliente e, estamos usando React-Native com Redux. Nós precisamos realizar várias transações complexas, então nossos side effects devem ser fáceis de ler e manter, por causa disso, decidimos usar redux-saga.

Image for post
Image for post
Proposta de data flow com Redux e Redux-Saga

Nesse post vou falar como usamos Redux com Redux-Saga juntos e, assumindo que você tenha um pouco de conhecimento sobre React/Redux/Redux-Saga, nós vamos prosseguir…

A proposta principal aqui é dividir suas ações em duas diferentes categorias:

  1. Ações do Sistema e Usuário
  2. Ações de Reducers

Ações do Sistema e Usuário

Esses tipos de ações serão despachadas por Container Components, dependendo de algum input do usuário, ou por algum ciclo de vida da aplicação (ex. componentDidMount).

Esses tipos de ações nunca serão utilizadas pelos Reducers. Ao invés disso, elas existem para funcionar apenas como input para as Sagas.

Ações de Reducers

Essas são ações despachadas por Sagas. Apenas essas ações irão mudar o estado da aplicação. Em adição a isso, cada ação de reducer tem apenas uma responsabilidade, e irá ser processada por exatamente um reducer.

Quais as consequências?

Antes de eu começar a seguir esses princípios, eu me encontrava na dúvida, se eu despachava duas ações, separadamente (ex: fetchData e setLoadingSpinner) ou se eu despachava apenas uma ação e fazia a alteração em dois reducers com lógica e estado que poderia mudar com o tempo. Com alguns side effects misturado, você não tem muita idéia do que irá acontecer na sua aplicação.

Separando nesse tipo de estrutura de ações, você irá ter um fluxo de dados bem limpo, de graça. — Marcel Schulze

Com a proposta acima, você deve despachar apenas uma ação de Usuário no seu Container (ex: _selectProduct), e zero, uma ou mais ações de Reducer na sua Saga (ex: setSelectedProduct, setLoadingSpinner, someOtherStuff).

Devido ao estilo das funções Generators, você pode ler o arquivo, linha por linha, e mesmo efeitos mais complicados, ficam simples. E você pode usar vários utilitários como takeLatest ou takeEvery para suas ações de Usuário.

Image for post
Image for post
Exemplo de uma Saga: recebe uma Ação-Usuário e retorna um ou mais Ações-Reducer

Para realizar esse trabalho e deixar tudo organizado, você irá precisar criar uma Saga para cada Ação de Usuário. Com essa configuração, cada novo desenvolvedor no seu projeto, pode imediatamente ver o que é possível e o que acontece na sua aplicação. Mostrando apenas todas as suas Sagas relacionadas a Ações-Usuários, ele ou ela, terá um resumo do que acontece na sua aplicação. Fora isso, nada mais deve acontecer.

Image for post
Image for post
Mais exemplos e detalhes estão por vir

Para reduzir o boilerplate introduzido com redux-saga, nós podemos omitir o ActionCreators padrão.

Coisas para se pensar:

  • Nossos Reducer podem ignorar todas as Ações-Usuário/Sistema por padrão
  • Gerar um flowchart que mostra as conexões entre Ações-Usuário/Sistema e Ações-Reducers

Written by

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store