javascript - 最好将一些大型或多个小型商店与 React 和 Reflux 一起使用

Question

不久前，我们开始了我们的第一个基于网络的单页应用程序。我们从 React 和 Flux(Facebook 实现)开始，但最近切换到 Reflux 来实现 Flux。虽然 Fb Flux 实现知道“命名”商店事件的概念，但这个概念在 Reflux 中不可用。因此，每个监听商店的组件总是对所有事件使用react。下面是显示我们用户界面复杂性的引用图像。

如您所见，我们有很多重复组件(具有相同信息的多个选项卡、具有客户详细信息的多个组件以及具有详细信息的多个重复列表(甚至嵌套)。

此应用程序是现有 .Net 应用程序的新前端 (UI)，用于维护所有 te 数据(开立的发票等)。 Web 应用程序可以使用 Web 服务 (MVC Web API 2) 与此后端通信。

鉴于图片中显示的用户界面，我想知道我是否可以更好地为每张发票建立一个存储所有发票数据的商店(带有一个引用所有发票数据的聚合商店)，或者为每个发票建立一个商店仅包含发票抬头信息的发票和包含每个详细信息 Pane 信息的其他一些商店。

提前感谢您的 react 和建议!

Answer 1

编辑:我误读了你的问题，好像你想要 Reflux 的答案，而我只给出了 React 的答案。无论如何，我会保留它以备将来引用。

我 的做法是在单个商店中存储一组发票。所以我会让我的服务器 API 输出如下所示:

[
    {
        invoice_no: 1,
        delivery: {
            // delivery details
        },
        customer: {
            // customer details
        }
        products: [
            {
                product_no: 1,
                product_details: {
                    ...
                }
            },
            {
                product_no: 5,
                product_details: {
                    ...
                }
            }
        ]
    },
    {
        invoice_no: 2,
        ...
    }
]

然后将其存储在 <App> 中组件的状态。我的 React 代码大致如下所示:

var App = React.createClass({
    getInitialState: function() {
        return { invoices: [] };
    },
    onComponentDidMount: function() {
        // make an ajax call to server to get
        // invoices data. Then on success:
        // this.setState({ invoices: data });
    },
    render: function() {
        <div>
            <InvoiceTabs invoices={this.state.invoices} />
        </div>
    }
});

// Everything here on out is just using props, so it's immutable data.
var InvoiceTabs = React.createClass({
    render: function() {
        var InvoiceComponents = this.props.invoices.map(function(invoice) {
            return (
                <Invoice invoice={invoice} />
            );
        });
    }
});

var Invoice = React.createClass({
    render: function() {
        var invoice = this.props.invoice;

        return (
            <li>
                <ProductsList products={invoice.products} />
                <DeliveryInfo delivery={invoice.delivery} />
                <InvoiceCalculator />
            </li>
        )
    }
});

// various other components