Normalmente pubblico materiale relativo al codice su Stack, ma questa è più una domanda su quali sono i pensieri generali della comunità.

Sembra che ci siano molte persone che sostengono l'uso di Redux con React per gestire dati / stato, ma durante la lettura e l'apprendimento di entrambi mi sono imbattuto in qualcosa che non sembra proprio corretto.

Redux

In fondo a questa pagina: http://redux.js.org/docs/basics/UsageWithReact.html (Passing the Store) si consiglia di utilizzare la "magia" di React 'Context'.

Un'opzione sarebbe passarlo come sostegno a ogni componente del contenitore. Tuttavia diventa noioso, poiché devi cablare l'archiviazione anche attraverso i componenti di presentazione solo perché capita di eseguire il rendering di un contenitore in profondità nell'albero dei componenti.

L'opzione che consigliamo è quella di utilizzare uno speciale componente React Redux chiamato per rendere magicamente il negozio disponibile a tutti i componenti del contenitore ...

Reagire

Nella pagina React Context ( https://facebook.github.io/react/docs/context.html ) ha un avviso in alto:

Il contesto è una funzionalità avanzata e sperimentale. È probabile che l'API cambi nelle versioni future.

Quindi in basso:

Proprio come è meglio evitare le variabili globali quando si scrive codice chiaro, nella maggior parte dei casi dovresti evitare di usare il contesto ...

Non utilizzare il contesto per passare i dati del modello attraverso i componenti. Il threading dei dati attraverso l'albero in modo esplicito è molto più facile da capire ...

Così...

Redux consiglia di utilizzare la funzionalità React 'Context' piuttosto che passare il storelungo a ciascun componente tramite 'props'. Mentre React consiglia il contrario.

Inoltre, sembra che Dan Abramov (il creatore di Redux) ora lavori per Facebook (il creatore di React), solo per confondermi di più.

• Sto leggendo tutto bene ..?
• Qual è il consenso generale attuale su questo tema ..?

Il contesto è una funzionalità avanzata ed è soggetta a modifiche. In alcuni casi le sue comodità superano i suoi svantaggi, quindi alcune librerie come React Redux e React Router scelgono di fare affidamento su di esso nonostante la natura sperimentale.

La parte importante qui è la parola biblioteche . Se il contesto cambia il suo comportamento, noi autori di biblioteche dovremo adattarci . Tuttavia, fintanto che la libreria non ti chiede di utilizzare direttamente l'API di contesto, tu come utente non dovresti preoccuparti delle modifiche ad essa.

React Redux utilizza il contesto internamente ma non espone questo fatto nell'API pubblica. Quindi dovresti sentirti molto più sicuro usando il contesto tramite React Redux che direttamente perché se cambia, l'onere dell'aggiornamento del codice sarà su React Redux e non su te.

In definitiva, React Redux supporta ancora il passaggio sempre allo store come prop, quindi se vuoi evitare completamente il contesto, hai quella scelta. Tuttavia direi che questo è poco pratico.

TLDR: Evita di usare il contesto direttamente a meno che tu non sappia veramente cosa stai facendo. L'uso di una libreria che fa affidamento sul contesto internamente è relativamente sicuro.

Non conosco altri, ma preferisco usare il decoratore di connessione di react-redux per avvolgere i miei componenti in modo che solo gli oggetti di scena del negozio di cui ho bisogno vengano passati nel mio componente. Ciò giustifica l'uso del contesto in un certo senso perché non lo sto consumando (e so, di regola, qualsiasi codice di cui sono responsabile non lo consumerà).

Quando provo i miei componenti, provo il componente non avvolto. Poiché react-redux ha superato solo gli oggetti di scena di cui avevo bisogno su quel componente, ora so esattamente di quali oggetti ho bisogno quando scrivo i test.

Suppongo che il punto sia che non vedo mai la parola contesto nel mio codice, non la consumo, quindi in una certa misura non mi influenza! Questo non dice nulla sull'avvertimento "sperimentale" di Facebook .. Se il contesto scomparisse, sarei fregato come tutti gli altri fino a quando Redux non fosse aggiornato.

C'è un modulo npm che rende davvero facile aggiungere redux al contesto di react

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>
    );
  }
}