隔離 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 減速器組合混用。對於典型的 Web 應用程式，請堅持使用減速器組合。對於將不同工具分組到統一套件中的「產品中心」、「儀表板」或企業軟體，請嘗試子應用程式方法。

子應用程式方法對於依產品或功能垂直劃分的龐大團隊也很有用。這些團隊可以獨立發布子應用程式，或與封裝的「應用程式外殼」結合發布。

以下是子應用程式的根連接元件。它可以像往常一樣，呈現更多元件（已連接或未連接）作為子項。我們通常會在 <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 實作的事實保持為實作細節時，它會很有用。每個元件執行個體都會有自己的儲存，因此它們不會「知道」彼此。