隔离 Redux 子应用

¥Isolating Redux Sub-Apps

考虑嵌入较小“子应用”（包含在 <SubApp> 组件中）的“大”应用（包含在 <BigApp> 组件中）的情况：

¥Consider the case of a “big” app (contained in a <BigApp> component) that embeds smaller “sub-apps” (contained in <SubApp> components):

import React, { Component } from 'react'
import SubApp from './subapp'

class BigApp extends Component {
  render() {
    return (
      <div>
        <SubApp />
        <SubApp />
        <SubApp />
      </div>
    )
  }
}

这些 <SubApp> 将完全独立。他们不会共享数据或操作，也不会互相看到或交流。

¥These <SubApp>s will be completely independent. They won't share data or actions, and won't see or communicate with each other.

最好不要将此方法与标准 Redux reducer 组合混合。对于典型的 Web 应用，请坚持使用 reducer 组合。对于“产品中心”、“仪表板”或将不同工具分组到统一包中的企业软件，请尝试使用子应用方法。

¥It's best not to mix this approach with standard Redux reducer composition. For typical web apps, stick with reducer composition. For “product hubs”, “dashboards”, or enterprise software that groups disparate tools into a unified package, give the sub-app approach a try.

子应用方法对于按产品或功能垂直字段划分的大型团队也很有用。这些团队可以独立发布子应用，也可以与封闭的“应用外壳”结合发布。

¥The sub-app approach is also useful for large teams that are divided by product or feature verticals. These teams can ship sub-apps independently or in combination with an enclosing “app shell”.

下面是子应用的根连接组件。像往常一样，它可以将更多组件（无论是否连接）渲染为子组件。通常我们会在 <Provider> 中渲染它并完成它。

¥Below is a sub-app's root connected component. As usual, it can render more components, connected or not, as children. Usually we'd render it in <Provider> and be done with it.

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

但是，如果我们有兴趣隐藏子应用组件是 Redux 应用的事实，则不必调用 ReactDOM.render(<Provider><App /></Provider>)。

¥However, we don't have to call ReactDOM.render(<Provider><App /></Provider>) if we're interested in hiding the fact that the sub-app component is a Redux app.

也许我们希望能够在同一个“更大”的应用中运行它的多个实例，并将其保留为一个完整的黑匣子，其中 Redux 是一个实现细节。

¥Maybe we want to be able to run multiple instances of it in the same “bigger” app and keep it as a complete black box, with Redux being an implementation detail.

要将 Redux 隐藏在 React API 后面，我们可以将其封装在一个特殊的组件中，该组件在构造函数中初始化存储：

¥To hide Redux behind a React API, we can wrap it in a special component that initializes the store in the constructor:

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>
    )
  }
}

这样每个实例都是独立的。

¥This way every instance will be independent.

对于共享数据的同一应用的部分，不建议使用此模式。然而，当较大的应用对较小的应用具有零访问权限时，它会很有用 '内部结构，以及我们'd 喜欢保留它们是使用 Redux 实现的事实作为实现细节。每个组件实例都有自己的存储，因此它们不会相互“了解”。

¥This pattern is not recommended for parts of the same app that share data. However, it can be useful when the bigger app has zero access to the smaller apps' internals, and we'd like to keep the fact that they are implemented with Redux as an implementation detail. Each component instance will have its own store, so they won't “know” about each other.