redux-promise 在调度动作后使用 'then()'

Question

我想删除一个帖子。我使用 redux-promise 作为中间件。 我的操作如下所示：

export function deletePost(id) {
    const request = axios.delete(`${ROOT_URL}/${id}?apiKey=${API_KEY}`)

    return {
        type: DELETE_POST,
        payload: request
    }
}

然后我的组件中有一个按钮来触发操作。

onDeleteClick() {
        deletePost(id)
        .then(setState({ redirect: true }))
    }

问题是我不能使用'then()'。我只想在删除帖子后将用户重定向到主页。 请帮帮我。

---

应要求提供源代码。

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;
    }
}

组件/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

根据redux-promise source code，看起来它应该返回链式承诺：

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);

所以，我假设您可以取消调度。

也就是说，您的 sn-p 有几个潜在问题。如果它在一个组件中，那么deletePost 来自哪里？您也没有在setState 前面使用this。假设deletePost 是一个绑定动作创建者，这个例子应该是正确的：

onDeleteClick() {
    this.props.deletePost(id)
        .then(() => this.setState({redirect : true});
}