Quando as pessoas aprendem o ReduxJS, elas se maravilham com sua simplicidade e com seus ganhos. Tenho trabalhado com o ReduzJS desde 2015 e não consigo parar, mas precisei mudar algumas abordagens para ser mais produtivo, e um grande divisor de águas foi escrever redutores menos verbosos.

Lendo a documentação oficial do ReduxJS, você dará um passo adiante no básico sobre os redutores. Ela explica o que é um redutor, o que é bom sobre isso, e como modelar um estado com eles. Você entende isso e antes do que você esperava, se verá confiando sua camada de estado a isso.

Então, um ano passa.

…

De repente, você percebe que sua pasta de redutores tem 8 arquivos. 8 arquivos com quase o mesmo conteúdo. Conteúdos que são gerados assim que uma ação é executada. Quase a mesma coisa, de novo e de novo. E muitas palavras, a maioria repetida. Switch, switch, case, break, switch, return, :, case, break.

Somente para refrescar brevemente sua memória:

const todos = (state = INITIAL_STATE, action) => {
  switch (action.type) {
    case ADD_TODO:
      return [...state.todos, action.todo]
    case REMOVE_TODO:
      return state.todos.filter(todo => todo.id !== action.todo.id)
    default:
      return state
  }
}

Sim. Isso é exatamente o que eu aprendi um ano atrás. Não é feio – embora isso dependa da perspectiva – nem errado; em vez disso, é apenas uma maneira verbosa e, talvez, não tão fluida de escrever o mesmo que:

const todos = (state = INITIAL_STATE, action) => reswitch(
  ADD_TODO,
    [...state.todos, action.todo],

  REMOVE_TODO,
    () => state.todos.filter(todo => todo.id !== action.todo.id)
)(state, action.type)

Dessa maneira, você acabou de economizar 59 caracteres. Agora, vamos multiplicar 59 por 8 e teremos 472, o que significa que você pode passar mais tempo pensando sobre sua solução do que digitando. Também, gratuitamente, você está recebendo um código mais declarativo, “salvo da aparência” condicional, resultando em um estilo mais funcional.

Apresentando o reswich

Essa não é uma biblioteca super poderosa que fará sua aplicação ser o próximo grande êxito. Ela não tem nem funcionalidades novas. É pequena, não minimizada, a saída construída com apenas 4kb. É apenas um retrabalho sobre como os redutores poderiam ser escritos em vez de utilizar o simples e comum comando switch que foi ensinado um ano atrás.

Para instalá-lo, digite yarn add reswitch através do terminal, na mesma pasta onde está o projeto, e:

import reswitch from 'reswitch'
import {USERS_GET, USERS_GET__SUCCESS, USERS_GET__FAILURE} from 'consts/users'

const INITIAL_STATE = {areLoading: false, hasError: false, users: null}

const users(state = INITIAL_STATE, action) => reswitch(
  USERS_GET,
    {...defaultState, areLoading: true},

  USERS_GET__SUCCESS,
    {...defaultState, areLoading: false, users: action.users},

  USERS_GET__FAILURE,
    {...defaultState, areLoading: false, hasError: true}
)(state, action.type)

export default users

Boom! Os redutores são ótimos novamente, com uma quantidade menor de símbolos.

Por curiosidade, eu escolhi escrever a biblioteca (sim, sou o criador dela) passando todas as ações e estados como argumentos para uma função, em vez de um objeto grande e simples, para nos poupar de escrever {} no começo e fim dos parênteses. Meio obsessivo, não?

Acesse o repositório do reswitch se quiser ver a documentação completa.

Modestamente, do meu ponto de vista pessoal, escrever os redutores com essa pequena biblioteca fará você se sentir empolgado para criar redutores novamente (se você já perdeu a empolgação antes).

É isso. Espero que ela possa útil.

Esse pequeno artigo foi escrito inspirado por um outro artigo no site Open Source Guide, onde o autor do PhantomJS revela que escreveu alguns posts sobre seu projeto para ajudá-lo a espalhar a palavra.

***

Guilherme Oderdenge faz parte do time de colunistas internacionais do iMasters. A tradução do artigo é feita pela redação iMasters, com autorização do autor, e você pode acompanhar o artigo em inglês no link: https://medium.com/@chiefgui/be-more-productive-writing-your-reduxjs-reducers-d50308e1af93.