1

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

屏幕样本

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

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

鉴于图片中显示的用户界面，我想知道我是否可以更好地为每张发票保存所有发票数据的商店（以及引用所有发票数据的聚合商店），或者为每张发票保存的商店只有发票标题信息和一些其他存储每个详细信息窗格的信息。

提前感谢您的反应和建议！

4

1 回答 1

2

编辑：我误读了你的问题，好像你想要一个 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
于 2015-04-18T01:24:52.023 回答