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

Question

A while ago we started with our first web-based single page application. We started with React and Flux (Facebook implementation), but recently switched to Reflux for the Flux implementation. While the Fb Flux implementation knows the concept of 'named' store events, this concept is not available in Reflux. As a result, every component that listens to a store always reacts on all events. Below there is reference image that displays the complexity of our user interface.

As you can see we have a lot of repeating components (multiple tabs with the same sort of info, multiple components with customer details and multiple reapeating lists (even nested) with details.

This application is a new front-end (UI) for an existing .Net application that maintains all te data (opened invoices etc.). The web application can communicate with this back-end by use of web services (MVC web API 2).

Given the user interface as shown in the picture, I would like to know whether I could better go for a store per invoice that holds all the invoice data (with an aggregated store that references them all), or for a store per invoice that holds only the invoice header info and some other stores that hold the information for each of the detail panes.

Thanks in advance for your reactions and suggestions!

Answer 1

edit: I misread your question, seems like you wanted a Reflux answer while I only gave a React answer. I will keep this up anyway for future reference.

The way I would do it is a single store that stores an array of invoices. So I would make my server API output something like this:

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

And then store that in a <App> component's state. My React code would look roughly like this:

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