Async initial state React-Redux Redux-Thunk
<p>Using <code>React</code>, <code>Redux</code>, <code>Redux-thunk</code> I want to have an initial state through a server request (API call) but I cannot seem to get this to work.</p>

<p>What I have got so far:</p>

<pre><code>var Redux = require('redux');
var carReducer = require('./reducers/cars');
var thunk = require('redux-thunk').default;

var initialState = require('./reducers/initialState');

var rootReducer = Redux.combineReducers({
    cars: carReducer
});

module.exports = Redux.applyMiddleware(thunk)(Redux.createStore)(rootReducer, initialState.loadInitial());
</code></pre>

<p>This is my initial store creation. My <code>InitialState</code> looks like this:</p>

<pre><code>var $ = require('jquery');

module.exports = {
    loadInitial: loadInitial
};

function loadInitial() {
    return {
        cars: [
            {}
        ]
    }
}
</code></pre>

<p>When I try to turn this <code>loadInitial</code> into a <code>$.get('api/...')</code>, Redux tells me that I need an initial state in order for it to work. </p>

<p>In my reducer I have a load method:</p>

<pre><code>function updateReducer(state, action) {
    switch (action.type) {
        case 'load':
            return action.data;
        case 'update':
            return updateCars(action.data, state);
        default:
            return action.data || initialState.loadInitial().cars;
    }
};
</code></pre>

<p>But again, if I use - as a default - an async call, it does not seem to work.</p>

<p>What I actually want is for my store to be initialized with whatever comes from the database. This is needed for my HandsonTable, since I pass the properties to the table and as I have it now, it will only render me one row because my initial state has only one object.</p>

<p>Weird part about this is that when I click on the table, it actually gets me all my rows because the data is loaded, but I'm guessing just too late.</p>

<p>Anyway, my question here is, how do I initialize my store through an api call to my backend?</p>