Redux - Perguntas para uma entrevista de emprego

Introdução

Procurando uma forma de ajudar os(as) desenvolvedores(as) que estão fora do mercado do mercado de trabalho, eu decidi iniciar uma série de posts onde eu abordo perguntas e respostas recorrentes de uma entrevista para uma vaga de desenvolvedor React. Esse é o segundo post da série e desta vez eu focarei no Redux, um dos gerenciadores de estado mais usado pela comunidade. E assim como no primeiro post, eu caprichei para o conteúdo ser o mais rico possível, então aproveitem a leitura <3

Redux

1. O que é o Flux?

Flux é um paradigma de design de aplicativo usado como substituto do padrão mais tradicional, o MVC. Não é um framework ou uma biblioteca, mas um novo tipo de arquitetura que complementa o React e o conceito de fluxo de dados unidirecional. O Facebook usa esse padrão internamente ao trabalhar com o React.

O fluxo de trabalho acontece entre os componentes dispatcher, stores e views com entradas e saídas distintas, como a seguir:

2. O que é o Redux?

O Redux é uma biblioteca JavaScript de código aberto para gerenciar o estado do aplicativo. Ele pode ser utilizado junto com o React ou com qualquer outra biblioteca de visualizações. É pequeno (cerca de 2kB) e não possui dependências.

3. Quais são os principais conceitos do Redux?

O Redux segue três princípios fundamentais:

• Fonte única de verdade: o estado de todo o aplicativo é armazenado em uma árvore de objetos com um único armazenamento. A árvore de estado único facilita o controle das alterações ao longo do tempo e a depuração ou inspeção do aplicativo.
• O estado é somente leitura: a única maneira de alterar o estado é emitir uma ação, um objeto que descreve o que aconteceu. Isso garante que, nem as visualizações, nem as callbacks da rede sejam gravadas diretamente no estado.
• As alterações são feitas com funções puras: para especificar como a árvore de estados é transformada por ações, escreva reducers. Os reducers são apenas funções puras que tomam o estado anterior e uma ação como parâmetros, e assim retornam o próximo estado.

4. Como acessar um store do Redux fora de um componente?

Você só precisa exportar o store do módulo onde ele foi criado com o createStore().

store = createStore(myReducer)

export default store

5. Existem semelhanças entre o Redux e o RxJS?

Essas bibliotecas são muito diferentes e servem para propósitos diferentes, mas existem algumas semelhanças.

O Redux é uma ferramenta para gerenciar o estado em todo o aplicativo e geralmente é usado como uma arquitetura para UIs. Pense nisso como uma alternativa ao Angular. O RxJS é uma biblioteca de programação reativa e geralmente é usado como uma ferramenta para realizar tarefas assíncronas em JavaScript.

Pense nisso como uma alternativa às Promises. O Redux usa o paradigma reativo porque o store é reativo. O store observa ações à distância e muda a si próprio. O RxJS também usa o paradigma reativo, mas, em vez de ser uma arquitetura, fornece blocos de construção básicos, os observables, para realizar esse padrão.

6. Qual é a diferença entre o React context e o React Redux?

Você pode usar o Contexto diretamente na sua aplicação, e ele será ótimo para passar dados a componentes 'profundamente' aninhados.

Vale apontar que o Redux usa o contexto internamente, mas não expõe esse fato na API pública. Ainda assim, o Redux é muito mais poderoso e fornece um grande número de recursos que a API de contexto não fornece.

7. O que é o redux-saga?

redux-saga é uma biblioteca que visa facilitar o uso e aliviar os efeitos colaterais do Redux, como busca de dados e acesso ao cache do navegador.

O Saga é como uma threada separada na sua aplicação, sendo a único responsável pelos efeitos colaterais. redux-saga é um middleware redux, o que significa que esse encadeamento pode ser iniciado, pausado e cancelado a partir da aplicação principal, com ações normais do Redux.

8. O que é o redux-thunk?

O redux-thunké um middleware que permite a você escrever actions creators que retornam uma função ao invés de uma ação. Ele pode pode ser usado para realizarmos o dispatch somente se uma condição é cumprida. A função interna recebe os métodos dispatch() e getState() como parâmetros.

9. Quais são as diferenças entre o redux-saga e o redux-thunk?

Ambos lidam com efeitos colaterais. Na maioria dos casos, o Thunk usa as Promises para tratá-los, enquando o Saga usa os Generators. Como as promises são familiares a muitos desenvolvedores, o redux-thunk é mais simples de ser utilizado, entretando, o redux-saga, com os seus generators, é mais poderoso. Mas ambos os middlewares podem coexistir, portanto, você pode começar com o thunk e introduzir o saga quando precisar dele.

10. O que é o Redux Form?

O Redux Form trabalha com o React e o Redux para permitir que um formulário no React use o Redux para armazenar todo o seu estado. Ele pode ser usado com entradas HTML5 tradicionais, mas também funciona muito bem com frameworks comuns de UI, como Material UI, React Widgets e React Bootstrap.

11. Quais os principais recursos do Redux Form?

Algumas das principais características do Redux Form são:

1. Persistência dos valores nos inputs através do store do Redux.
2. Validação (sycn/async) e envio.
3. Formatação, análise e normalização de valores nos inputs.

Conclusão

Por hora é só pessoal! Apesar de eu ter trazido apenas as questões que achei mais recorrentes para um post sobre o Redux, você pode encontar muitas outras nesse repositório aqui. Fique de olho também nos próximos posts relativos a entrevistas de emprego, e se surgirem dúvidas ou sugestões, não deixem de mandar aí nos comentários!