Question

所以我使用React-Router制作一个简单的博客页面。 DELETE请求工作正常，但是在删除帖子之前它会重定向到索引页面，如果单击所述帖子（id未定义）则会导致错误。我已经在动作创建器上设置了一个回调，以确保请求在重定向之前完成，以及正在调用的deletePost函数。但是在请求完成删除之前它仍然会重定向，谢谢你看看！

带有onDeleteClick功能的

posts_show.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { fetchPost } from '../actions';
import { deletePost } from '../actions';

class PostsShow extends Component {
  componentDidMount() {
    const { id } = this.props.match.params;
    this.props.fetchPost(id);
  }
  onDeleteClick() {
    const { id } = this.props.match.params;

    this.props.deletePost(id, () => {
      this.props.history.push('/');
    });
  }
  render() {
    const { post } = this.props;
    if(!post) {
      return <div> Loading.. </div>
    }
    return <div className="container">
        <h3>{post.title}</h3>
        <h6>Categories: {post.categories}</h6>
        <p>{post.content}</p>
        <Link to="/" className="btn btn-secondary">
          Back
        </Link>
        <Link to="/" className="btn btn-danger btn-sm ml-2"
              onClick={this.onDeleteClick.bind(this)}
        >Delete</Link>
      </div>;
  }
}

function mapStateToProps({ posts }, ownProps) {
  return { post: posts[ownProps.match.params.id] };
}
export default connect(mapStateToProps, { fetchPost, deletePost })(PostsShow);

带有deletePost请求的

actions / index.js

import axios from 'axios';


export const FETCH_POSTS = 'fetch_posts';
export const CREATE_POST = 'create_post';
export const FETCH_POST = 'fetch_post';
export const DELETE_POST = 'delete_post';
const ROOT_URL = 'http://reduxblog.herokuapp.com/api';
const API_KEY = '?key=dmitriiiii88';

export function fetchPosts() {
  const request = axios.get(`${ROOT_URL}/posts${API_KEY}`)
  return {
    type: FETCH_POSTS,
    payload: request
  }
}

export function createPost(values, callback) {
  const request = axios.post(`${ROOT_URL}/posts${API_KEY}`, values)
    .then(() => callback());
  return {
    type: CREATE_POST,
    payload: request
  }
}

export function fetchPost(id) {
  const request = axios.get(`${ROOT_URL}/posts/${id}${API_KEY}`)

  return {
    type: FETCH_POST,
    payload: request
  }
}

export function deletePost(id, callback) {
  const request = axios.delete(`${ROOT_URL}/posts/${id}${API_KEY}`)
    .then(() => callback());

  return {
    type: DELETE_POST,
    payload: id
  }
}

Answer 1

您的操作是在API调用完成之前返回类型/有效内容对象。

如果您还没有，则需要使用某种redux中间件来返回函数。

redux-thunk或redux-saga都是不错的选择

您需要创建商店并传递中间件，如下所示：

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from  './reducers';

export default(initialState) => {
    return createStore(rootReducer, initialState, applyMiddleware(thunk));
}

然后在你的动作中，你可以返回一个函数，将你的动作发送到你的减速器：

export function deletePost(id, callback) {
    return (dispatch) => {

        axios.delete(`${ROOT_URL}/posts/${id}${API_KEY}`)
            .then(() => {
                return {
                    type: DELETE_POST,
                    payload: id
                }
            }.catch(err => console.log(`err: ${err}`))

    }
}

请注意，您不需要将您的axios调用分配给变量。

使用React-Router删除请求重定向过快

1 个答案: