As pessoas geralmente escolhem o Redux sem realmente precisar dele.
“Será que nosso aplicativo será escalável sem?”.
Em seguida, os desenvolvedores reclamam da complexidade introduzida em seu código:
“Por que eu tenho que alterar 3 arquivos para executar um recurso?”
Aliás, por quê?
Redux, React, programação funcional, imutabilidade e tudo mais são culpados por serem a fonte de todos os problemas e eu entendo isso. É normal comparar o Redux com uma abordagem que não precisa de código clichê para atualizar o estado e concluir que o Redux é apenas complicado. De certa forma, é verdade, e é intencional.
Redux oferece um contrato.
Ele pede que você se comprometa com:
- Descrever o estado do aplicativo com objetos e matrizes simples.
- Descrever mudanças no sistema com objetos simples.
- Descreva a lógica que trata das alterações com funções.
Nenhuma dessas restrições é necessária para construir um aplicativo, com ou sem React. Na verdade, essas são restrições fortes e você deve pensar duas vezes antes de adotá-las (mesmo que em parte) para seu aplicativo.
Você tem (realmente) boas razões para fazer isso?
Essas restrições são atraentes porque ajudam a criar aplicativos que:
- Mantenha o estado no armazenamento local e comece a usar
- Pré-preencher o estado no servidor e enviá-lo para o cliente em HTML e começar pronto para uso
- Serialize as ações do usuário e um instantâneo do estado para o sistema automatizado de relatórios de bugs para que os desenvolvedores possam reproduzi-los para reproduzir erros.
- Passe as ações de objetos pela rede para implementar ambientes colaborativos sem mudanças drásticas na forma como o código é escrito.
- Mantenha o histórico de desfazer ou implemente mutações otimistas sem mudanças drásticas na forma como o código é escrito.
- Vá e volte entre o histórico do estado de desenvolvimento e reavalie o estado atual do histórico de ação quando o código mudar “à la TDD”.
- Ofereça ferramentas de inspeção e controle para que os desenvolvedores possam criar ferramentas personalizadas para seus aplicativos.
- Ofereça variações na interface do usuário ao reutilizar a lógica de negócios
Se você estiver trabalhando em um terminal expansível, tem depurador de javascript ou tipo de aplicativo da web, pode valer a pena considerar algumas dessas ideias (que por sinal não são Não notícia).
Dito isso, se você está aprendendo React, não use o Redux por padrão. Em vez disso, aprenda a pense em reagir. Volte ao Redux se você realmente sentir a necessidade ou quiser tentar algo novo. Use-o com cautela, como faria com uma ferramenta altamente opinativa.
Se você se sente pressionado a fazer “do jeito Redux”, pode ser um sinal de que você ou sua equipe estão levando as coisas muito a sério. Não é nem mais nem menos do que uma ferramenta em sua caixa de ferramentas, um experimento quem tem espiral fora de controle.
Por fim, lembre-se de que você pode implementar ideias do Redux sem usar o Redux.
Por exemplo, aqui está um componente React com estado local:
import React, { Component } from 'react'; class Counter extends Component { state = { value: 0 }; increment = () => { this.setState(prevState => ({ value: prevState.value + 1 })); }; decrement = () => { this.setState(prevState => ({ value: prevState.value - 1 })); }; render() { return ( <div> {this.state.value} <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> </div> ) } }
É muito bom assim. Sério, vale a pena repetir:
Os estados locais estão bem.
A contrapartida que o Redux oferece é adicionar indireção para separar “o que aconteceu” de “como isso muda”.
Este ainda é um bom caminho a percorrer? Não, é um compromisso.
Por exemplo, podemos extrair um redutor do nosso componente:
import React, { Component } from 'react'; const counter = (state = { value: 0 }, action) => { switch (action.type) { case 'INCREMENT': return { value: state.value + 1 }; case 'DECREMENT': return { value: state.value - 1 }; default: return state; } } class Counter extends Component { state = counter(undefined, {}); dispatch(action) { this.setState(prevState => counter(prevState, action)); } increment = () => { this.dispatch({ type: 'INCREMENT' }); }; decrement = () => { this.dispatch({ type: 'DECREMENT' }); }; render() { return ( <div> {this.state.value} <button onClick={this.increment}>+</button> <button onClick={this.decrement}>-</button> </div> ) } }
Observe que acabamos de usar o Redux sem executar o npm install. Uau!
Você deve fazer isso com seus componentes statefull? Provavelmente não. Na verdade, não, a menos que você tenha um plano para aproveitar essa indireta adicional. Ter um plano, em nosso jargão, é fundamental.
A biblioteca Redux é um conjunto de auxiliares para montar redutores em um objeto de armazenamento global. Você pode usá-lo com ou sem moderação.
Mas se você usá-lo, certifique-se de receber algo em troca...
Artigo original de Dan Abramov
https://medium.com/@dan_abramov/you-might-not-need-redux-be46360cf367#.k0dntcu9w
traduzido do inglês por JS Staff
[separator type=”” size=”” icon=”star”] [actionbox color=”default” title=”” description=”JS-REPUBLIC é uma empresa de serviços especializada em desenvolvimento JavaScript. Somos um centro de treinamento aprovado. Encontre todos os nossos treinamentos técnicos em nosso site de parceiros dedicado ao Treinamento” btn_label=”Nosso treinamento” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external ="1″]