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

Question

我正在开发一个相当大规模的应用程序，如果能从您那里得到一些建议，我将不胜感激。 我在react-redux<Provider> 中有一个应用程序包装器，它有子应用程序列表。

const appState = {
    subApps: [],
};

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

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

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

Answer 1

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

更新：

丹·阿布拉莫夫推特：https://twitter.com/dan_abramov/status/716217178731765762

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

Answer 2

Redux 文档现在有关于此的信息，请参阅

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

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

大应用

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

子应用

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

Answer 3

稍微不同的全局应用状态结构对您有帮助吗？例如：

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

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

另一方面，如果您的子应用完全独立于父应用，您可以让它们使用他们想要的任何结构（例如，它们自己的 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>
        );
    },
});