隔离 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 组合混用。对于典型的 Web 应用，建议坚持使用 reducer 组合。对于"产品中心"、"仪表板"或需要整合不同工具的企业级软件，可以尝试子应用方案。

子应用方案同样适用于按产品或功能垂直划分的大型团队。这些团队可以独立交付子应用，也可以配合外部的"应用外壳"组合交付。

下面是子应用的根连接组件示例。和常规做法一样，它可以渲染更多组件（无论是否连接）作为子元素。通常我们会将其放在 <Provider> 中渲染完成。

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

但如果需要隐藏子应用组件是 Redux 应用的事实，就不必调用 ReactDOM.render(<Provider><App /></Provider>)。

有时我们需要在同一个"大型"应用中运行多个实例，并将其视为完全的黑盒，此时 Redux 应作为实现细节隐藏。

要将 Redux 隐藏在 React API 之后，可以将其封装在特殊组件中，该组件在构造函数内初始化 store：

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 实现的事实时，该模式非常有用。每个组件实例都有自己的 store，因此它们不会"感知"到彼此的存在。