# 子應用隔離 考慮一下這樣的場景：有一個大應用（對應 `<BigApp>` 組件）包含了很多小的“子應用”（對應 `SubApp` 組件）： ```js import React, { Component } from 'react' import SubApp from './subapp' class BigApp extends Component { render() { return ( <div> <SubApp /> <SubApp /> <SubApp /> </div> ) } } ``` 這些 `<SubApp>` 是完全獨立的。它們并不會共享數據或 action，也互不可見且不需要通信。 這時最好的做法是不要把它混入到標準 Redux 的 reducer 組件中。 對于一般型的應用，還是建議使用 reducer 組件。但對于 “應用集合”，“儀表板”，或者企業級軟件這些把多個本來獨立的工具湊到一起打包的場景，可以試下子應用的方案。 子應用的方案還適用于有多個產品或垂直業務的大團隊。小團隊可以獨立發布子應用或者互相獨立于自己的“應用殼”中。 下面是 connect 過的子應用的根組件。 像其它組件一樣，它還可以渲染更多子組件，connect 或者沒有 connect 的都可以。通常只要把它使用 `<Provider>` 渲染就夠了。 ```js class App extends Component { ... } export default connect(mapStateToProps)(App) ``` 但是，如果不想讓外部知道子應用的組件是 Redux 應用的話，可以不調用 `ReactDOM.render(<Provider><App /></Provider>)`。 或者可以在“大應用”中同時運行它的多個實例呢，還能保證每個在黑盒里運行，外界對 Redux 無感知。 為了使用 React API 來隱藏 Redux 的痕跡，在組件的構造方法里初始化 store 并把它包到一個特殊的組件中： ```js import React, { Component } from 'react' import { Provider } from 'react-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 作為一種內部細節實現方式對外部隱藏。 每個組件實例都有它自己的 store，所以它們彼此是*不可見*的。