In my app I have some data to be fetched from the server (a list of recipes). In certain views, only a preview of the recipe is shown--this includes fields like title, rating, and an image of the recipe, but not its ingredients or baking instructions. To prevent overfetching, only this data is retrieved from the server when the user views these pages. In order to synchronize data between tabs (my recipes, popular, new, etc.) all recipes are kept in a central redux store. This is so when I do something to a recipe in one tab (rate it, bookmark it, etc.) it is updated in all other tabs. If I were to only add the partial data from the recipe preview to this store, however, and another part of the application requested a recipe from the store, it would expect to have all the data, and possibly get errors when attempting to access non-existent fields. But I must add the data to the store or it won't be synchronized.
To remedy this I have two options, neither of which I particularly like:
- Keep two stores, one of recipes and one of recipe previews. Now
recipesis guaranteed to have all the data, and
recipePreviewsis guaranteed to have some of it needed for the preview. However, I now need to manage merging and updating these two lists together, which adds lots of complexity.
- Keep everything in one store, but don't guarantee that all the data will be there. Add another layer of abstraction on top that fetches the recipe from the store with the fields that are required by whatever component is using the data. Missing fields will be filled in by fetching them from the server. I don't like this option because I have to worry about possibly making asynchronous requests, and each function that uses data has to specify what it needs.
Which option should I pick (I'm currently more in favor of number 2), or is there a better way to do all this?