Reage com Redux? E quanto à questão do 'contexto'?

88

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 ..?
Stephen Last
fonte
8
Ahh essa é uma ótima pergunta, estou muito curioso para ouvir os pontos de vista dos outros também! Tenho um pouco de medo de que seja fechado devido ao aspecto da discussão. Eu realmente espero que não.
mjohnsonengr

Respostas:

88

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.

Dan Abramov
fonte
1
Bem disse Dan. O risco é que, se o React remover todo o contexto em uma versão futura, provavelmente será necessário retrabalho para atualizar qualquer aplicativo Redux existente. É improvável que o Redux seja capaz de proteger os usuários de tal mudança. Dado que agora você está no Facebook, a boa notícia é que espero que você seja avisado com bastante antecedência se o contexto desaparecer.
Casa Cory de
6
O React não remove o contexto. Quer dizer, é tecnicamente possível, mas a única razão pela qual existe é porque vários produtos dentro do FB precisavam disso. Portanto, a menos que haja uma solução equivalente, ela não irá embora. Mas sua API exata pode mudar, que é o que protegemos os usuários.
Dan Abramov,
5
Outra observação importante é o React planeja usar mais o contexto do que menos no futuro. Achamos que pode ser útil para estilização, animações, manipulação de gestos etc.
Dan Abramov,
É interessante notar, entretanto, que quando você obtém bibliotecas de componentes React (por exemplo, Material-ui), eles naturalmente não farão parte do modelo de estado do seu aplicativo, mas ainda são uma árvore de componentes React da mesma forma, com os mesmos requisitos de mantendo seu próprio modelo de estado e fluxo de dados separado do aplicativo 'principal'. Portanto, eles estão utilizando o recurso de contexto como o único meio (para eles) de passar os dados para a pesquisa de seus filhos.
stephenwil
1
@DanAbramov e a nova API de contexto? Ainda não é recomendado usar?
Stanislav Mayorov
4

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.

mjohnsonengr
fonte
Interessante ... Eu vejo o que você quer dizer sobre 'react-redux' usando Providere connectpara abstrair todas as coisas do Context. Eu acho que com Dan Abramov agora no FB você esperaria que se o Context mudasse Redux e 'react-redux' fosse atualizado ... Mas não há garantias, e o aviso "experimental" do FB ainda está lá para todos verem.
Stephen Último
Eu certamente tenho esperança de que, se o FB não mantiver o react-redux no loop no caso de algo acontecer ao contexto, um contribuidor de código aberto em algum lugar mais familiarizado com o redux do que eu; se não, vou descobrir e fazer sozinho!
mjohnsonengr
Pedi a opinião de Dan via Twitter ... Boa resposta, na mesma linha ... Use a biblioteca que usa Context, não use diretamente.
Stephen Last
1

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>
    );
  }
}
Jam Risser
fonte