Traducción Beta No Oficial

Esta página fue traducida por PageTurner AI (beta). No está respaldada oficialmente por el proyecto. ¿Encontraste un error? Reportar problema →

Aislamiento de Subaplicaciones Redux

Imagina una aplicación "grande" (contenida en un componente <BigApp>) que incluye aplicaciones más pequeñas "sub-apps" (contenidas en componentes <SubApp>):

import React, { Component } from 'react'
import SubApp from './subapp'

class BigApp extends Component {
  render() {
    return (
      <div>
        <SubApp />
        <SubApp />
        <SubApp />
      </div>
    )
  }
}

Estos <SubApp> serán completamente independientes. No compartirán datos ni acciones, ni podrán verse ni comunicarse entre ellos.

No es recomendable mezclar este enfoque con la composición estándar de reductores de Redux. Para aplicaciones web típicas, mantén la composición de reductores. Para "hubs de productos", "paneles de control" o software empresarial que agrupe herramientas dispares en un paquete unificado, prueba el enfoque de subaplicaciones.

El enfoque de subaplicaciones también es útil para equipos grandes organizados por productos o verticales de características. Estos equipos pueden desplegar subaplicaciones de forma independiente o combinada con un "shell de aplicación" contenedor.

A continuación se muestra el componente conectado raíz de una subaplicación. Como es habitual, puede renderizar más componentes (conectados o no) como hijos. Normalmente lo renderizaríamos en <Provider> y listo.

class App extends Component { ... }
export default connect(mapStateToProps)(App)

Sin embargo, no necesitamos llamar a ReactDOM.render(<Provider><App /></Provider>) si queremos ocultar que el componente de la subaplicación es una app de Redux.

Quizá queramos ejecutar múltiples instancias dentro de la misma aplicación "mayor" y mantenerlas como cajas negras completas, donde Redux sea un detalle de implementación.

Para ocultar Redux tras una API de React, podemos envolverlo en un componente especial que inicialice el store en el constructor:

import React, { Component } from 'react'
import { Provider } from 'react-redux'
import { createStore } from 'redux'
import reducer from './reducers'
import App from './App'

class SubApp extends Component {
  constructor(props) {
    super(props)
    this.store = createStore(reducer)
  }

  render() {
    return (
      <Provider store={this.store}>
        <App />
      </Provider>
    )
  }
}

Así cada instancia será independiente.

Este patrón no se recomienda para partes de la misma aplicación que comparten datos. Sin embargo, es útil cuando la aplicación mayor no tiene acceso a los internos de las apps menores, y queremos mantener como detalle de implementación que usan Redux. Cada instancia del componente tendrá su propio store, por lo que no "sabrán" de las demás.