redux-promise use 'then()' after dispatching action - reactjs

Question

I want to delete a post. I'm using redux-promise as middleware.
My action looks like this:
export function deletePost(id) {
const request = axios.delete(`${ROOT_URL}/${id}?apiKey=${API_KEY}`)
return {
type: DELETE_POST,
payload: request
}
}
Then I have a button in my component to trigger action.
onDeleteClick() {
deletePost(id)
.then(setState({ redirect: true }))
}
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.
Source code on request.
actions/index.js
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
}
}
reducers/post_reducer.js
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 => post !== action.payload.data);
default:
return state;
}
}
components/PostShow.js
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(() => this.setState({ redirect: true }))
}
render() {
if(!this.props.post) {
return <div>Loading...</div>
}
if(this.state.redirect) {
return <Redirect to='/'/>
}
return (
<div className='blog-post container'>
<h3>{this.props.post.title}</h3>
<h6>Categories: {this.props.post.categories}</h6>
<p>{this.props.post.content}</p>
<Link to='/'><button className='btn btn-primary'>Back</button></Link>
{ this.props.user
? <button className='btn btn-danger' onClick={this.onDeleteClick.bind(this)}>Delete</button>
: null }
</div>
);
}
}
function mapStateToProps(state) {
return {
post: state.posts.post,
user: state.user
}
}
export default connect(mapStateToProps, { fetchPost, deletePost }) (PostsShow)

Answer 1

Per the redux-promise source code, it looks like it should return the chained promise:
return isPromise(action.payload)
? action.payload.then(
result => dispatch({ ...action, payload: result }),
error => {
dispatch({ ...action, payload: error, error: true });
return Promise.reject(error);
}
)
: next(action);
So, I would assume that you could chain off of the dispatch.
That said, your snippet has a couple potential issues. If that's in a component, then where is deletePost coming from? You're also not using this in front of setState. Assuming that deletePost is a bound-up action creator, this example should be correct:
onDeleteClick() {
this.props.deletePost(id)
.then(() => this.setState({redirect : true});
}