Изоляция подприложений в 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 API, можно обернуть его в специальный компонент, инициализирующий хранилище в конструкторе:

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. Каждый экземпляр компонента будет иметь собственное хранилище, поэтому они не будут «знать» о существовании друг друга.