Question

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

Screen sample

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

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

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

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

Answer 1

编辑：我误解了你的问题，似乎你想要一个Reflux答案，而我只给了一个React答案。无论如何我会继续这样做以备将来参考。

I 的方式是一个存储发票数组的商店。所以我会使我的服务器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

最好使用React和Reflux的一些大型或多个小商店

1 个答案: