title: How to do asynchronous actions with React/Redux (este stack)
body: <p>I have successfully written some code that will go through the redux flow, after the click of a button it will display the information I want on the UI.</p>
  
  <p>I am using the <a href="https://github.com/este/este" rel="nofollow">este stack</a>.</p>
  
  <p>This is my button:</p>
  
  <pre><code>const Buttons = ({ requestAsyncData}) =&gt; (
    &lt;View&gt;
      &lt;Button onClick={requestAsyncData}&gt;
        &lt;FormattedMessage {...buttonsMessages.add100} /&gt;
      &lt;/Button&gt;
    &lt;/View&gt;
  );
  
  export default connect(state =&gt; ({}), { requestAsyncData })(Buttons);
  </code></pre>
  
  <p>Now here is where I define the action:</p>
  
  <pre><code>export const REQUEST_ASYNC_DATA = 'REQUEST_ASYNC_DATA';
  
  export const requestAsyncData = () =&gt; {
  
    return {
      type: REQUEST_ASYNC_DATA,
      payload: [{
        name: "one one!",
        id: Math.random()
      },{
        name: "two two!",
        id: Math.random()
      }]
    }
  </code></pre>
  
  <p>Here is my reducer:</p>
  
  <pre><code>const State = Record({
    map: Map()
  }, "names");
  
  const asyncExampleReducer = (state = new State(), action) =&gt; {
    switch (action.type) {
  
      case actions.REQUEST_ASYNC_DATA: {
        const names = action.payload.reduce((names, json) =&gt;
            names.set(json.id, new Name(json))
          , Map());
        return state.update('map', map =&gt; map.merge(names));
      }
  
      default:
        return state;
  
    }
  };
  
  export default asyncExampleReducer;
  </code></pre>
  
  <p>This works exactly as expected on the ui, updating with the correct information, from the action, I get actual payload to do as I please:</p>
  
  <pre><code>payload: [{
    name: "one one!",
    id: Math.random()
  },{
    name: "two two!",
    id: Math.random()
  }]
  </code></pre>
  
  <p><strong>Now I'm trying to make this payload asynchronous, let's say I will get the information for that object from an ajax api call.</strong></p>
  
  <p>How should I go about it?</p>
  
  <p>I'm not sure if I need to go with <a href="https://github.com/gaearon/redux-thunk" rel="nofollow">thunks</a> or if I should do something like suggested <a href="http://redux.js.org/docs/advanced/AsyncActions.html" rel="nofollow">here</a>, I've been trying all sort of recommendations but I'm not sure if my problems are javascript concrete problems or understanding react. </p>
  
  <p>For example I've tried to do an action similar to the one suggested by thunk but it doesn't recognize dispatch and it doesn't seem to delay it either...</p>
  
  <pre><code>function doIncrementAction() {
    return {
      type: REQUEST_ASYNC_DATA,
      payload: [{
        name: "trufa!",
        id: Math.random()
      },{
        name: "benja!",
        id: Math.random()
      }]
    }
  }
  
  export const requestAsyncData = () =&gt; {
    return dispatch =&gt; {
        setTimeout(() =&gt; {
          // Yay! Can invoke sync or async actions with `dispatch`
          dispatch(doIncrementAction());
        }, 1000);
      };
  };
  </code></pre>
  
  <hr>
  
  <pre><code>raven.js:290 Uncaught TypeError: Cannot read property 'payload' of undefined
  
  raven.js:290 Uncaught TypeError: dispatch is not a function
  </code></pre>
  
  <p>How should I go about this? Thanks!!</p>