隔离 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 后面，我们可以将其包装在一个特殊的组件中，该组件在构造函数中初始化存储。

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 实现的事实作为实现细节保留。每个组件实例将拥有自己的存储，因此它们不会“了解”彼此。