Let's say you're making an app that displays data about movies, which you get from the server in this format:
{ movies: [], actors: [], directors: [], years: [] }
The different arrays relate to each other via ids. In other words, an object in movies looks like this:
{title: 'The Shining', cast: [`837392010`, `363893920` ...], ...}
Each of those ids, in the cast array, is a reference to an actor in the actors array.
You put the data, as is, in the redux store, but different components need to use it in different arbitrary ways. For instance, one component needs to list all the movies Jack Nicholson was in during the 1970s, even though the years array doesn't link directly to actors. It just links to movies, which themselves link to actors. So before the component can render, it needs to run a bunch of data transforms.
Another component lists all the times Martin Scorsese and Robert DiNero have worked together, another lists all the movies with "Fire" in their titles, another lists all the movies Tom Hanks was in between 1990 and 2000...
The product manager plans to add and remove arbitrary displays like this all the time, so, the date will be used, in the app, like a queryable database. The specific queries will be changed quite often.
Let's also say that the transforms must be done on the client. The server's only capability will be to send the data in the normalized form, above.
What's the best way to structure an app like this, so that it's scalable and easy to update? I can think of a few approaches:
Do all the mapping in reducers. The downside is that they reducers will get bloated. They will need to cache the same data in a ton of different forms.
Store the raw, normalized data in the reducers, and use controller components (high-level components) to map it into whatever form their children need. I'm not crazy about this, because it litters the view with business logic. Of course, that assumes you think of high-level components as view.
Map in the connect, mapStateToProps functions. Each high-level component would connect to the store, but before it got its props, they'd be transformed, by connect, to the appropriate format.
????