title: Redux - managing preload state
body: <p>I'm building an application, where I need to preload <code>people</code> and <code>planet</code> data (<em>it's likely that in the future more preload requirements may be added</em>) on launch of the application. I want to have value in the store that represents the global state of the app as <code>loaded: &lt;boolean&gt;</code>. The value would be true only then when the preload requirements <code>people.loaded: true</code> and <code>planet.loaded: true</code> are true. The store would look something like this:</p>
  
  <pre><code>Store
  ├── loaded: &lt;Boolean&gt;
  ├── people:
  │   ├── loaded: &lt;Boolean&gt;
  │   └── items: []
  ├── planets:
  │   ├── loaded: &lt;Boolean&gt;
  │   └── items: []
  </code></pre>
  
  <p>Separate action creators make the needed async requests and dispatch actions which are handled by the <code>People</code> and <code>Planets</code> reducers. As shown below (uses <a href="https://github.com/gaearon/redux-thunk" rel="noreferrer">redux-thunk</a>):</p>
  
  <p><code>actions/index.js</code></p>
  
  <pre><code>import * as types from '../constants/action-types';
  import {getPeople, getPlanets} from '../util/swapi';
  
  export function loadPeople () {
    return (dispatch) =&gt; {
      return getPeople()
        .then((people) =&gt; dispatch(addPeople(people)));
    };
  }
  
  export function loadPlanets () {
    return (dispatch) =&gt; {
      return getPlanets()
        .then((planets) =&gt; dispatch(addPeople(planets)));
    };
  }
  
  export function addPeople (people) {
    return {type: types.ADD_PEOPLE, people};
  }
  
  export function addPlanets (planets) {
    return {type: types.ADD_PLANETS, planets};
  }
  
  export function initApp () {
    return (dispatch) =&gt; {
      loadPeople()(dispatch);
      loadPlanets()(dispatch);
    };
  }
  </code></pre>
  
  <p><code>../util/swapi</code> handles fetching people and planet data either from LocalStorage or making a request.</p>
  
  <p><code>initApp()</code> action creator calls other action creators within <code>site.js</code> just before rendering to DOM as shown below:</p>
  
  <p><code>site.js</code></p>
  
  <pre><code>import React from 'react';
  import {render} from 'react-dom';
  import Root from './containers/root';
  import configureStore from './store/configure-store';
  import {initApp} from './actions';
  
  const store = configureStore();
  
  // preload data
  store.dispatch(initApp());
  
  render(
    &lt;Root store={store} /&gt;,
    document.querySelector('#root')
  );
  </code></pre>
  
  <p><strong>1. What are the best practices for managing global preload state of the application in Redux?</strong></p>
  
  <p><strong>2. Is having a global <code>loaded</code> state in the store necessary?</strong></p>
  
  <p><strong>3. What would be a scalable way of checking app <code>loaded</code> state in multiple React components?</strong> It doesn't seem right to include <code>People</code> and <code>Planet</code> state for containers that just needs to know the global app state and doesn't handle rendering of <code>People</code> or <code>Planets</code>. Also that would be painful to manage when the global <code>loaded</code> state would be needed in multiple containers.</p>
  
  <hr>
  
  <p>Quoting part of Dan's answer from <a href="https://stackoverflow.com/a/33633850/1378261">Redux - multiple stores, why not?</a> question.</p>
  
  <blockquote>
    <p>Using reducer composition makes it easy to implement "dependent updates" a la waitFor in Flux by writing a reducer manually calling other reducers with additional information and in a specific order.</p>
  </blockquote>
  
  <p><strong>4. Does Dan by calling other reducers mean calling nested reducers?</strong> </p>