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 reducer の構成と混ぜることはお勧めしません。一般的なウェブアプリでは、reducer の構成を維持してください。「製品ハブ」、「ダッシュボード」、または異なるツールを統合パッケージにグループ化するエンタープライズソフトウェアの場合、サブアプリアプローチを試してみてください。

サブアプリアプローチは、製品または機能の垂直方向に分割された大規模チームにも役立ちます。これらのチームは、サブアプリを独立して、または包含する「アプリシェル」と組み合わせてリリースできます。

以下は、サブアプリのルートに接続されたコンポーネントです。通常どおり、子として、接続されているかどうかに関わらず、より多くのコンポーネントをレンダリングできます。通常は <Provider> でレンダリングして終了します。

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

ただし、サブアプリコンポーネントが Redux アプリであるという事実を隠したい場合は、ReactDOM.render(<Provider><App /></Provider>) を呼び出す必要はありません。

同じ「大きな」アプリ内で複数のインスタンスを実行し、Redux を実装の詳細として維持したい場合があります。

React API の背後に Redux を隠すには、コンストラクタでストアを初期化する特別なコンポーネントでラップします。

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 で実装されているという事実を実装の詳細として維持したい場合に役立ちます。各コンポーネントインスタンスには独自のストアがあるため、互いに「認識」しません。