Изоляция подприложений Redux

Рассмотрим случай «большого» приложения (содержащегося в <BigApp> компоненте), которое включает в себя меньшие «подприложения» (содержащиеся в <SubApp> компонентах):

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

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

Эти <SubApp> будут полностью независимыми. Они не будут обмениваться данными или действиями и не будут видеть или взаимодействовать друг с другом.

Лучше не смешивать этот подход со стандартной композицией редьюсеров Redux. Для типичных веб-приложений придерживайтесь композиции редьюсеров. Для «продуктовых центров», «панелей управления» или корпоративных приложений, объединяющих разные инструменты в единый пакет, попробуйте подход с подприложениями.

Подход с подприложениями также полезен для больших команд, разделенных по продуктам или функциональным вертикалям. Эти команды могут выпускать подприложения независимо или в сочетании с окружающим «оболочкой приложения».

Ниже представлен корневой подключенный компонент подприложения. Как обычно, он может отображать больше компонентов, подключенных или нет, в качестве дочерних элементов. Обычно мы отображаем его в <Provider> и закончили.

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

Однако, нам не нужно вызывать ReactDOM.render(<Provider><App /></Provider>) если мы заинтересованы в скрытии факта, что компонент подприложения является приложением Redux.

Возможно, мы хотим иметь возможность запускать несколько экземпляров его в одном «большом» приложении и сохранять его как полную «черную коробку», где Redux — это деталь реализации.

Чтобы скрыть Redux за интерфейсом React, мы можем обернуть его в специальный компонент, который инициализирует хранилище в конструкторе:

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

Таким образом, каждый экземпляр будет независимым.

Эта схема не рекомендуется для частей одного приложения, которые совместно используют данные. Однако она может быть полезна, когда «большое» приложение не имеет доступа к внутренностям «маленьких» приложений, и мы хотим сохранить тот факт, что они реализованы с помощью Redux, как деталь реализации. Каждый экземпляр компонента будет иметь свое собственное хранилище, поэтому они не будут «знать» друг о друге.