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

Question

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

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

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

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

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

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

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

Better use some large or multiple small stores with React and Reflux

javascript

reactjs

refluxjs