title: redux-promise use 'then()' after dispatching action
body: <p>I want to delete a post. I'm using redux-promise as middleware. 
  My action looks like this:</p>
  
  <pre><code>export function deletePost(id) {
      const request = axios.delete(`${ROOT_URL}/${id}?apiKey=${API_KEY}`)
  
      return {
          type: DELETE_POST,
          payload: request
      }
  }
  </code></pre>
  
  <p>Then I have a button in my component to trigger action.</p>
  
  <pre><code>onDeleteClick() {
          deletePost(id)
          .then(setState({ redirect: true }))
      }
  </code></pre>
  
  <p>The problem is that I can't use 'then()'. I would simply like to redirect user to homepage after deleting post.
  Please help me guys.</p>
  
  <hr>
  
  <p>Source code on request.</p>
  
  <p>actions/index.js</p>
  
  <pre><code>import axios from 'axios';
  
  export const DELETE_POST = 'DELETE_POST';
  
  export const ROOT_URL = 'example.com';
  export const API_KEY = 'randomstring';
  
  export function deletePost(id) {
      const request = axios.delete(`${ROOT_URL}/${id}?apiKey=${API_KEY}`)
  
      return {
          type: DELETE_POST,
          payload: request
      }
  }
  </code></pre>
  
  <p>reducers/post_reducer.js</p>
  
  <pre><code>import {  DELETE_POST } from '../actions/index';
  
  const INITIAL_STATE = { all: [], post: null };
  
  export default function(state = INITIAL_STATE, action) {
      switch(action.type) {
              return state.all.filter(post =&gt; post !== action.payload.data);
          default:
              return state;
      }
  }
  </code></pre>
  
  <p>components/PostShow.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { connect } from 'react-redux';
  import { fetchPost, deletePost } from '../actions/index';
  import { Link } from 'react-router-dom';
  import { Redirect } from 'react-router';
  
  class PostsShow extends Component {
       constructor(props) {
          super(props)
  
          this.state = {
              redirect: false
          }
      }
      componentWillMount() {
          this.props.fetchPost(this.props.match.params.id)
      }
  
      onDeleteClick() {
          deletePost(this.props.match.params.id)
          .then(() =&gt; this.setState({ redirect: true }))
      }
  
  
      render() {
  
          if(!this.props.post) {
              return &lt;div&gt;Loading...&lt;/div&gt;
          }
          if(this.state.redirect) {
              return &lt;Redirect to='/'/&gt;
          }
  
          return (
  
              &lt;div className='blog-post container'&gt;
                  &lt;h3&gt;{this.props.post.title}&lt;/h3&gt;
                  &lt;h6&gt;Categories: {this.props.post.categories}&lt;/h6&gt;
                  &lt;p&gt;{this.props.post.content}&lt;/p&gt;
                  &lt;Link to='/'&gt;&lt;button className='btn btn-primary'&gt;Back&lt;/button&gt;&lt;/Link&gt;
                  { this.props.user
                  ? &lt;button className='btn btn-danger' onClick={this.onDeleteClick.bind(this)}&gt;Delete&lt;/button&gt; 
                 : null }
              &lt;/div&gt;
          );
      }
  }
  
  function mapStateToProps(state) {
      return {
          post: state.posts.post,
          user: state.user
      }
  }
  
  export default connect(mapStateToProps, { fetchPost, deletePost }) (PostsShow)
  </code></pre>