title: React & Redux with dynamic elements
body: <p>I am currently developing an analytics dashboard in React/Redux that is similar to this:</p>
  <p><a href="https://i.stack.imgur.com/vO6dL.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vO6dL.jpg" alt="Analytics dashboard" /></a></p>
  <p>Users of the dashboard will be able to add and remove tiles to customise the dashboard to their own needs, and the configuration of the tiles is stored and retrieved in an API.</p>
  <p>The storing of the data for the configuration of tiles seems to fit well with the global state model:</p>
  <ol>
  <li>On load, the dashboard component dispatches a 'loadTiles' action</li>
  <li>The action fetches the tiles data and passes it to the 'tiles' reducer</li>
  <li>From there it goes into the store/global state.</li>
  <li>In mapStateToProps, the data is accessed from state.app.tiles</li>
  </ol>
  <p>However, a problem arises when populating the data for each tile. The number of tiles and nature of the data is dynamic, so reducers can't be set up ahead of time.</p>
  <p>This could be solved by each component managing their own state (as in pure/traditional React using componentWillMount etc) but this will violate some of the architectural principals that have been laid out for the rest of the project (ideally everything is to be managed in global state).</p>
  <p>The only way I can see of storing the data is global state would be to have an analytics with a dynamic array of the various data sets, which sounds messy to me.</p>
  <p>Is local component state the best solution here? or can this be done in global state cleanly? Are there any example of Redux using queries that are dynamically specified?</p>