title: Delay in dispatching action in redux
body: <p>calling dispatch, and immediately console logging the data. It is showing old data instead of the updated data, unless you add some delay in.</p>
  
  <p>Example based on the redux todo example.</p>
  
  <p>ACTION</p>
  
  <pre><code>let nextTodoId = 0
  export const addTodo = text =&gt; {
    console.log('action');
    return ({
      type: 'ADD_TODO',
      id: nextTodoId++,
      text
    })
  }
  </code></pre>
  
  <p>REDUCER</p>
  
  <pre><code>const todos = (state = [], action) =&gt; {
    switch (action.type) {
      case 'ADD_TODO':
        console.log('reducer');
        return [
          ...state,
          {
            id: action.id,
            text: action.text,
            completed: false
          }
        ]
      default:
        return state
    }
  }
  
  export default todos
  </code></pre>
  
  <p>COMPONENT</p>
  
  <pre><code>class AddTodo extends Component {
  
    render() {
      var _this = this;
  
      return (
        &lt;div&gt;
          &lt;form
            onSubmit={e =&gt; {
              e.preventDefault()
              this.props.dispatch(addTodo('input.value'))
              console.log('Not updated', this.props.todos);
              setTimeout(function() {
                console.log('Updated', _this.props.todos);
              });
            }}
          &gt;
            &lt;button type="submit"&gt;Add Todo&lt;/button&gt;
          &lt;/form&gt;
        &lt;/div&gt;
      );
    }
  }
  </code></pre>
  
  <p>Output</p>
  
  <pre><code>index.js:3 action
  todos.js:4 reducer
  AddTodo.js:16 Not updated []
  AddTodo.js:18 Updated [{…}]
  </code></pre>
  
  <p>AddTodo.js:18 Updated [{…}]</p>