Normalmente publico cosas relacionadas con el código en Stack, pero esta es más una pregunta sobre cuáles son los pensamientos generales de la comunidad.

Parece que hay mucha gente que defiende el uso de Redux con React para administrar datos / estado, pero mientras leía y aprendía ambos, me encontré con algo que no parece correcto.

Redux

En la parte inferior de esta página: http://redux.js.org/docs/basics/UsageWithReact.html (Pasando la tienda) recomienda usar la "Magia" de React 'Context'.

Una opción sería pasarlo como un accesorio a cada componente del contenedor. Sin embargo, se vuelve tedioso, ya que tiene que almacenar cables incluso a través de componentes de presentación solo porque representan un contenedor en lo profundo del árbol de componentes.

La opción que recomendamos es usar un componente especial de React Redux llamado para hacer que la tienda esté disponible mágicamente para todos los componentes del contenedor ...

Reaccionar

En la página React Context ( https://facebook.github.io/react/docs/context.html ) tiene una advertencia en la parte superior:

El contexto es una característica avanzada y experimental. Es probable que la API cambie en futuras versiones.

Luego en la parte inferior:

Así como es mejor evitar las variables globales al escribir código claro, debe evitar el uso de contexto en la mayoría de los casos ...

No utilice el contexto para pasar los datos de su modelo a través de componentes. Pasar sus datos a través del árbol de forma explícita es mucho más fácil de entender ...

Entonces...

Redux recomienda usar la función React 'Context' en lugar de pasarla storea cada componente a través de 'props'. Mientras que React recomienda lo contrario.

Además, parece que Dan Abramov (el creador de Redux) ahora trabaja para Facebook (el creador de React), solo para confundirme más.

• ¿Estoy leyendo todo esto bien ...?
• ¿Cuál es el consenso general actual sobre este tema ...?

El contexto es una función avanzada y está sujeta a cambios. En algunos casos, sus comodidades superan sus desventajas, por lo que algunas bibliotecas como React Redux y React Router eligen confiar en él a pesar de la naturaleza experimental.

La parte importante aquí son las bibliotecas de palabras . Si el contexto cambia su comportamiento, nosotros , como autores de bibliotecas, tendremos que ajustarnos . Sin embargo, siempre que la biblioteca no le pida que use directamente la API de contexto, usted, como usuario, no debería tener que preocuparse por los cambios.

React Redux usa el contexto internamente, pero no expone este hecho en la API pública. Por lo tanto, debería sentirse mucho más seguro usando el contexto a través de React Redux que directamente porque si cambia, la carga de actualizar el código estará en React Redux y no en usted.

En última instancia, React Redux todavía admite siempre pasar store como un accesorio, por lo que si desea evitar por completo el contexto, tiene esa opción. Sin embargo, diría que esto no es práctico.

TLDR: Evite usar el contexto directamente a menos que realmente sepa lo que está haciendo. Usar una biblioteca que depende del contexto internamente es relativamente seguro.

No sé sobre otros, pero prefiero usar el decorador de conexión de react-redux para envolver mis componentes de modo que solo los accesorios de la tienda que necesito se pasen a mi componente. Esto justifica el uso del contexto en cierto sentido porque no lo estoy consumiendo (y sé, por regla general, que cualquier código del que esté a cargo no lo consumirá).

Cuando pruebo mis componentes, pruebo el componente no empaquetado. Debido a que react-redux solo pasó los accesorios que necesitaba en ese componente, ahora sé exactamente qué accesorios necesito cuando estoy escribiendo las pruebas.

Supongo que el punto es que nunca veo la palabra contexto en mi código, no la consumo, así que hasta cierto punto, ¡no me afecta! Esto no dice nada sobre la advertencia "experimental" de Facebook. Si el contexto desapareciera, estaría tan jodido como todos los demás hasta que Redux fuera actualizado.

Hay un módulo npm que hace que sea realmente fácil agregar redux al contexto de reacción

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