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)

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

同じ「大きな」アプリ内で複数インスタンスを実行可能にしつつ、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で実装されている事実を実装詳細として保持したい場合に有用です。各コンポーネントインスタンスは独自のストアを持つため、互いを「認識」しません。