如何用redux组织“子应用程序”？

Question

我正在开发一个非常大规模的应用程序，非常感谢您收到一些建议。我在react-redux <Provider>中有一个应用程序包装器，它有子应用程序列表。

const appState = {
    subApps: [],
};

子应用程序非常复杂，使用它们的一些组件作为容器会很方便，所以使用mapStateToProps和mapDispatchToProps。但是，使用mapStateToProps是不可能的，因为store是一个根对象，我们不知道appState中当前子应用程序的索引是什么。

在未来，我计划将这些子应用程序分开，然后将其放入自己的Web工作者线程中。在这种情况下，也许可以使用多个商店并将商店发送到主线程并将其作为主商店的一部分？

有很多方法可以处理这种情况，基本上，问题是如何使用redux框架处理子应用程序之类的东西。也许你们中的一些人遇到了类似的问题，或者只是知道解决方案如何以最好的方式解决。

Answer 1

在这种情况下似乎最好的解决方案是使用<Provider>包装每个subApp并为每个容器传递自己的存储。我们还可以使用react-redux-custom-store库来创建具有自定义名称的商店。

更新：

和阿布拉莫夫twitt：https://twitter.com/dan_abramov/status/716217178731765762

示例：https://gist.github.com/gaearon/eeee2f619620ab7b55673a4ee2bf8400

Answer 2

全局应用程序状态的略有不同的结构会对您有帮助吗？例如：

const appState = {
    subApps: {
        subApp1: {},
        subApp2: {},
        // etc.
    },
    currentSubApp: 'subApp2',
};

const subApp2State = appState.subApps[appState.currentSubApp];

另一方面，如果您的subApps完全独立于父应用程序，您可以让他们使用他们想要的任何结构（例如，他们自己的redux存储，不同于父应用程序）并简单地将它们集成到React中包装器组件，像这样：

import SubApp from '...anywhere...';

const SubAppWrapper = React.createClass({
    componentDidMount: function() {
        this.subApp = new SubApp({
            containerElement: this.refs.containerDiv,
            // other params
        });
    },

    componentWillUnmount: function() {
        this.subApp.destroy();
    },

    render: function() {
        return (
            <div ref="containerDiv"></div>
        );
    },
});

Answer 3

Redux文档现在有关于此的信息

https://redux.js.org/recipes/isolatingsubapps

简而言之，您可以将这些子应用程序视为拥有自己商店的私有应用程序。它们将被包裹在连接到特定商店的<Provider> HOC中。

BigApp

import React, { Component } from 'react'
import SubApp from './subapp'
​
class BigApp extends Component {
  render() {
    return (
      <div>
        <SubApp />
        <SubApp />
        <SubApp />
      </div>
    )
  }
}

SubApp

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