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?
Respostas:
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 queReduxpermitem.
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
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:
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.
Os únicos motivos para usar o Redux para mim são:
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.
- 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.
duixpacote npm. É apenas um gerenciador de estado simples com retornos de chamada, realmente fácil de implementar. Só para esclarecer: eu sou o criador.