React Context vs React Redux, quando devo usar cada um? [fechadas]

187

O React 16.3.0 foi lançado e a API de contexto não é mais um recurso experimental. Dan Abramov (o criador do Redux) escreveu um bom comentário aqui sobre isso, mas foram 2 anos quando o Contexto ainda era um recurso experimental.

Minha pergunta é, na sua opinião / experiência, quando devo usar o React Context sobre React Redux e vice-versa?

Alfrex92
fonte
Se você está comparando a API Redux e React Context, é porque você deseja apenas manter vars sincronizados entre os componentes. Verifique o duixpacote npm. É apenas um gerenciador de estado simples com retornos de chamada, realmente fácil de implementar. Só para esclarecer: eu sou o criador.
Brode Noel

Respostas:

208

Como o Contexto não é mais um recurso experimental, é possível usá-lo diretamente no seu aplicativo e será ótimo para passar dados para componentes profundamente aninhados para os quais foi projetado.

Como Mark Erikson escreveu em seu blog :

Se você estiver usando apenas o Redux para evitar a transmissão de objetos, o contexto poderá substituir o Redux - mas você provavelmente não precisará do Redux em primeiro lugar.

O contexto também não oferece nada parecido com Redux DevTools, a capacidade de rastrear suas atualizações de estado, middlewareadicionar lógica de aplicativo centralizada e outros recursos poderosos que Redux permitem.

Reduxé muito mais poderoso e fornece um grande número de recursos que Context Apiele não fornece, também como o @danAbramov mencionou

O React Redux usa o contexto internamente, mas não expõe esse fato na API pública. Portanto, você deve se sentir muito mais seguro usando o contexto via React Redux do que diretamente, porque se isso mudar, o ônus de atualizar o código estará no React Redux e não você.

Cabe ao Redux realmente atualizar sua implementação para aderir à mais recente API de contexto

A API de contexto mais recente pode ser usada para aplicativos em que você simplesmente usaria o Redux para passar dados entre componentes; no entanto, aplicativos que usam dados centralizados e manipulam solicitações de API em criadores de ação que usam redux-thunkou redux-sagaainda precisam de redux. Além desse redux, há outras bibliotecas associadas, como as redux-persistque permitem salvar os dados da loja no localStorage e reidratar na atualização, que é o contexto em que a API ainda não suporta.

Como @dan_abramov mencionou em seu blog Você pode não precisar do Redux , que o redux possui aplicativos úteis como

  • Persista o estado para um armazenamento local e, em seguida, inicie a partir dele, pronto para uso.
  • Pré-preencha o estado no servidor, envie-o para o cliente em HTML e inicie-o, imediatamente.
  • Serialize ações do usuário e anexe-as, juntamente com um instantâneo de estado, a relatórios de erros automatizados, para que os desenvolvedores do produto
    possam reproduzi-los para reproduzir os erros.
  • Passe objetos de ação pela rede para implementar ambientes colaborativos sem mudanças drásticas na forma como o código é escrito.
  • Mantenha um histórico de desfazer ou implemente mutações otimistas sem mudanças drásticas na forma como o código é escrito.
  • Viaje entre o histórico do estado em desenvolvimento e reavalie o estado atual do histórico de ações quando o código for alterado, à la TDD.
  • Forneça recursos completos de inspeção e controle para as ferramentas de desenvolvimento, para que os desenvolvedores de produtos possam criar ferramentas personalizadas para seus
    aplicativos.
  • Forneça interfaces de usuário alternativas enquanto reutiliza a maior parte da lógica de negócios.

Com esses muitos aplicativos, é muito cedo para dizer que o Redux será substituído pela nova API de contexto

Shubham Khatri
fonte
Ok, mas e quanto à reutilização? Os contextos são completamente reutilizáveis, uma vez que redux + thunk e, especialmente, redux + saga são apenas um pouco.
Yurii Haiovyi
4
@Daggett Uma coisa que precisamos entender é redux não é contexto, é construído em cima do contexto, a loja que você é transmitida pelo contexto, também pode você elaborar o que você quer dizer com reutilização
Shubham Khatri
Mesmo o desenvolvimento de coisas tão básicas como contêiner reutilizável com efeitos colaterais se torna um pesadelo com redux. O Redux é restrito ao nível do aplicativo, e você pode dizer que ainda é reutilizável etc. etc., mas dizer reutilizável quero dizer totalmente reutilizável ... Sem espaguete de picos, construído como um pacote separado, e poderia ser reutilizado independentemente para a configuração do aplicativo .
Yurii Haiovyi
@YuriiHaiovyi Concordo com suas perguntas. Essa resposta é basicamente uma versão compilada do que dizem as postagens do blog vinculado. Nada sobre compartilhar a própria perspectiva, como se eu estivesse usando apenas o contexto, e depois fiquei preso, e senti que é uma má escolha por alguns motivos x, y, z e depois mudei para o Redux, Mobx que resolveu o problema .. ou o contrário história por exemplo. Principalmente, as pessoas estão perguntando ou pesquisando isso para ver se há algumas histórias boas ou ruins que podem ajudar os leitores a pensar e tomar decisões calculadas ... Então, minha pergunta, que caminho você escolhe?
Arup Rakshit 15/09/19
4
Qual parte do redux não é reutilizável? Você poderia reutilizar facilmente redutores, seletores, ações e criadores de ações em outro aplicativo com redux (reagir, até angular).
Dávid Molnár 30/10
85

Se você estiver usando o Redux apenas para evitar a transmissão de objetos para componentes profundamente aninhados , poderá substituir o Redux pela ContextAPI. Ele é exatamente destinado a este caso de uso.

Por outro lado, se você estiver usando o Redux para todo o resto (com um contêiner de estado previsível, manipulando a lógica do aplicativo fora dos seus componentes, centralizando o estado do aplicativo, usando o Redux DevTools para rastrear quando, onde, por que e como o estado do aplicativo) alterado ou usando plug-ins como Redux Form , Redux Saga , Redux Undo , Redux Persist , Redux Logger , etc…), então não há absolutamente nenhuma razão para você abandonar o Redux. A ContextAPI não fornece nada disso.

E eu pessoalmente acredito que a extensão Redux DevTools é uma ferramenta de depuração incrível e subestimada, que justifica por si só continuar usando o Redux.

Algumas referências:

GG.
fonte
12

Prefiro usar o redux com o redux-thunk para fazer chamadas de API (também usando o Axios) e enviar a resposta aos redutores. É limpo e fácil de entender.

A API de contexto é muito específica para a parte react-redux de como os componentes do React estão conectados à loja. Para isso, o react-redux é bom. Mas se você quiser, como o Context é oficialmente suportado, você poderá usar a API do Context em vez do react-redux.

Portanto, a pergunta deve ser Context API vs react-redux, e não Context API vs redux. Além disso, a questão é um pouco opinativa. Como estou familiarizado com o react-redux e o uso em todos os projetos, continuarei a usá-lo. (Não há incentivo para eu mudar).

Mas se você está aprendendo redux hoje e não o usou em nenhum lugar, vale a pena dar uma chance à API de contexto e substituir react-redux pelo seu código personalizado da API de contexto. Talvez seja muito mais limpo assim.

Pessoalmente, é uma questão de familiaridade. Não há razão clara para escolher um sobre o outro, porque eles são equivalentes. E internamente, o react-redux usa o Context de qualquer maneira.

vijayst
fonte
10

Os únicos motivos para usar o Redux para mim são:

  • Você deseja um objeto de estado global (por vários motivos, como depuração, persistência ...)
  • Seu aplicativo é ou será grande e deve ser dimensionado para muitos desenvolvedores: nesse caso, você provavelmente precisará de um nível de indireção (isto é, um sistema de eventos): você aciona eventos (no passado) e depois pessoas que você não conhece no seu organização pode realmente ouvi-los

Você provavelmente não precisa do nível de indireção de todo o aplicativo, por isso é bom misturar estilos e usar o estado / contexto local e o Redux, ao mesmo tempo.

Sebastien Lorber
fonte
1
  • Se você precisar usar o middleware para vários propósitos. Por exemplo, ações de log, relatório de erros, envio de outras solicitações, dependendo da resposta do servidor, etc.
  • Quando dados provenientes de vários pontos de extremidade influenciam um único componente / visualização.
  • Quando você deseja ter maior controle sobre as ações em seus aplicativos. O Redux permite rastrear ações e alterar dados, simplificando bastante a depuração.
  • Se você não deseja que a resposta do servidor altere diretamente o estado do seu aplicativo. O Redux adiciona uma camada, onde você pode decidir como, quando e se esses dados devem ser aplicados. O padrão do observador. Em vez de criar vários editores e assinantes em todo o aplicativo, basta conectar componentes à loja Redux.

De: quando usar o Redux?

Michał Rejman
fonte