A dívida com a tecnologia pode aumentar rapidamente ao criar um aplicativo do zero. Frameworks como React e Redux fornecem ótimos padrões para estruturar código modularmente.

E vivemos em um mundo perfeito, então isso é tudo de que precisaremos!

Exceto que não fazemos , e não é .

Ao usar React e Redux, sempre chego a um ponto em que dou um passo para trás e penso “Nossa, quando isso ficou tão bagunçado?”. Isso leva a uma reorganização e, após resolver todos os Line x:y: ‘somethingImportant’ is not defined no-undeferros, estou finalmente satisfeito.

Até, é claro, acontecer novamente, várias semanas depois.

Um código como esse precisa de cuidado constante. Precisa de amor e carinho. Domestique a besta enquanto a torna mais forte. Estruturar código indisciplinado requer uma estratégia abrangente.

Para React & Redux, uso o que gosto de chamar de IARS . Pronuncia-se “EEEARRRRGHS”.

“EEEARRRRGHS ME HEARTY”

IARS

Diga como quiser, IARS significa Interações , Ações , Redutores , Seletores .

Aqui está uma análise.

Interações

É aqui que o trabalho pesado é feito, desencadeado pela atividade do usuário. Salvando algo novo? Coloque a funcionalidade aqui e exporte-a para que o componente front end possa acessá-la.

Qualquer alteração em seu aplicativo deve ser iniciada a partir daqui. Despachar ações de interações.js.

Exemplo: Eu faço muito desenvolvimento Blockchain DApp, então a Figura 1 é um exemplo de uma função em interações.js carregando um jogador de um jogo que estou criando.

A única dependência externa aqui é playerDetailsLoadedde actions.js .

tennisPlayeré uma instância de contrato inteligente no Blockchain. Ele armazena uma lista de jogadores e expõe uma playersmatriz pública , que é chamada com o idpara recuperar um único jogador.

A Figura 2 mostra como ele é chamado a partir do componente.

Ações

Ações são o que o despachante usa para interagir com os redutores. Seu arquivo actions.js vai ficar parecido com a Figura 3 depois de um tempo.

A linha 55 mostra a playerDetailsLoadedfunção chamada do dispatcher em interações.js .

Este arquivo ficará grande muito rapidamente, então é aconselhável transformar actions.js em um diretório de ações e separar as ações logicamente. Mais sobre isso mais tarde.

Redutores

Redutores são o que alteram os dados na loja redux. Se você já usou Redux antes, você saberá como eles são. A Figura 4 mostra um exemplo de nosso PLAYER_DETAILS_SELECTEDredutor na linha 22.

Seletores

Os seletores são o que os componentes usam para acessar os dados na loja redux. Eu uso uma combinação de lodash e reselect em selectors.js . A Figura 5 mostra um snippet de selectors.js com o select usado para obter selectedPlayerDetailsda loja redux.

A Figura 6 mostra como chamá-lo do componente.

E aí temos que! Do componente à interação, à ação, ao redutor, ao seletor e de volta ao componente.

A melhor coisa sobre esse padrão é que cada componente precisa saber apenas sobre algumas interações e alguns seletores, mantendo o código do componente limpo.

Crescendo

Comece com um redux / pasta com os seguintes arquivos:

• interações.js
• actions.js
• reducers.js
• selectors.js

“EEEARRRRGHS”

Leitura Adicional

Recursos de desenvolvimento de Blockchain para seguir agora