Eu normalmente posto coisas relacionadas ao código no Stack, mas esta é mais uma questão sobre quais são os pensamentos gerais da comunidade.

Parece haver muitas pessoas defendendo o uso de Redux com React para gerenciar dados / estado, mas ao ler e aprender ambos, descobri algo que não parece muito certo.

Restaurado

No final desta página: http://redux.js.org/docs/basics/UsageWithReact.html (Passando pela Loja), ele recomenda o uso da "Magia" do 'Contexto' do React.

Uma opção seria passá-lo como um suporte para cada componente do contêiner. No entanto, torna-se tedioso, pois você tem que armazenar até mesmo por meio de componentes de apresentação apenas porque eles renderizam um contêiner nas profundezas da árvore de componentes.

A opção que recomendamos é usar um componente React Redux especial chamado para tornar a loja disponível magicamente para todos os componentes do contêiner ...

Reagir

Na página React Context ( https://facebook.github.io/react/docs/context.html ), há um aviso no topo:

O contexto é um recurso avançado e experimental. É provável que a API mude em versões futuras.

Então, na parte inferior:

Assim como as variáveis ​​globais devem ser evitadas ao escrever um código claro, você deve evitar o uso de contexto na maioria dos casos ...

Não use o contexto para passar os dados do seu modelo por meio de componentes. Encadear seus dados pela árvore explicitamente é muito mais fácil de entender ...

Assim...

Redux recomenda usar o recurso React 'Contexto' ao invés de passar storepara cada componente via 'adereços'. Enquanto React recomenda o oposto.

Além disso, parece que Dan Abramov (o criador do Redux) agora trabalha para o Facebook (o criador do React), só para me confundir mais.

• Estou lendo tudo isso certo ..?
• Qual é o consenso geral atual sobre este assunto ..?

O contexto é um recurso avançado e está sujeito a alterações. Em alguns casos, suas conveniências superam suas desvantagens, então algumas bibliotecas como React Redux e React Router optam por confiar nele, apesar da natureza experimental.

A parte importante aqui são as bibliotecas de palavras . Se o contexto mudar seu comportamento, nós , como autores de bibliotecas, precisaremos nos ajustar . No entanto, contanto que a biblioteca não solicite que você use diretamente a API de contexto, você, como usuário, não deve se preocupar com alterações nela.

O React Redux usa 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 ele mudar, a carga de atualização do código será do React Redux e não de você.

Em última análise, o React Redux ainda oferece suporte a sempre passar a loja como um suporte, então se você quiser evitar completamente o contexto, você tem essa escolha. No entanto, eu diria que isso não é prático.

TLDR: Evite usar o contexto diretamente, a menos que você realmente saiba o que está fazendo. Usar uma biblioteca que depende do contexto internamente é relativamente seguro.

Não sei sobre outros, mas prefiro usar o decorador de conexão do react-redux para embrulhar meus componentes de forma que apenas os adereços da loja que eu preciso sejam passados ​​para o meu componente. Isso justifica o uso de contexto em certo sentido porque eu não o estou consumindo (e eu sei, como regra, qualquer código pelo qual eu esteja encarregado não o consumirá).

Quando testo meus componentes, testo o componente não embalado. Como o react-redux passou apenas pelos adereços de que precisava naquele componente, agora sei exatamente de quais adereços preciso quando estou escrevendo os testes.

Suponho que a questão seja: eu nunca vejo a palavra contexto em meu código, eu não a consumi, então, até certo ponto, ela não me afeta! Isso não diz nada sobre o aviso "experimental" do Facebook. Se o contexto desaparecesse, eu estaria tão ferrado quanto todos os outros até que o Redux fosse atualizado.

Há um módulo npm que torna muito fácil adicionar redux ao contexto de reação

https://github.com/jamrizzi/redux-context-provider

https://www.npmjs.com/package/redux-context-provider

import React, { Component } from 'react';
import ReduxContextProvider from 'redux-context-provider';
import createStore from './createStore';
import actions from './actions';
import Routes from './routes';

export default class App extends Component {
  render() {
    return (
      <ReduxContextProvider store={store} actions={actions}>
        <Routes />
      </ReduxContextProvider>
    );
  }
}