返回派发块中的Javascript提取删除请求方法不起作用

Question

我在代码中偶然发现了一个非常奇怪的问题。

此提取删除请求操作效果很好。

export const deleteUser = id => {
    fetch(`${BASE_ENDPOINT}/users/${id}`, {
        method: 'DELETE'
    }); 
};

但是这个修改过的不是吗？！？

export const deleteUser = id => {
    return dispatch => {
        fetch(`${BASE_ENDPOINT}/users/${id}`, {
            method: 'DELETE'
        })
            .then(res => res.json())
            .then(res => {
                if (res.error) throw Error(res.error);
                dispatch(deleteUserSuccess(true));
                return res;
            })
            .catch(error => dispatch(deleteUserError(error)));
    };
};

它只是没有按照请求发送请求到服务器；我已经通过检查Chrome的开发者工具控制台的“网络”标签对此进行了验证。没有对服务器的请求。

这是我的Actions.js

import { BASE_ENDPOINT } from '../shared/Constants';

import { 
    FETCH_USERS_SUCCESS,
    FETCH_USERS_ERROR, 
    DELETE_USER_SUCCESS,
    DELETE_USER_ERROR
} from './Types';

const fetchUsersSuccess = users => ({
    type: FETCH_USERS_SUCCESS,
    users
});

const fetchUsersError = error => ({
    type: FETCH_USERS_ERROR,
    error
});

const deleteUserSuccess = deleted => ({
    type: DELETE_USER_SUCCESS,
    deleted
});

const deleteUserError = error => ({
    type: DELETE_USER_ERROR,
    error
});

export const fetchUsers = () => {
    return dispatch => {
        fetch(`${BASE_ENDPOINT}/users/`, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json'
            }
        })
            .then(res => res.json())
            .then(res => {
                if (res.error) throw Error(res.error);
                dispatch(fetchUsersSuccess(res));
                return res;
            })
            .catch(error => dispatch(fetchUsersError(error)));
    };
};

export const deleteUser = id => {
    return dispatch => {
        fetch(`${BASE_ENDPOINT}/users/${id}`, {
            method: 'DELETE'
        })
            .then(res => res.json())
            .then(res => {
                if (res.error) throw Error(res.error);
                dispatch(deleteUserSuccess(true));
                return res;
            })
            .catch(error => dispatch(deleteUserError(error)));
    };
};

这是我的Reducers.js

const initialState = {
    users: [],
    fetchError: false,
    deleted: false,
    deleteError: false,
};

export const usersReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'FETCH_USERS_SUCCESS':
            return {
                ...state,
                users: action.users
            };
        case 'FETCH_USERS_ERROR':
            return {
                ...state,
                fetchError: action.error
            };
        case 'DELETE_USER_SUCCESS':
                return {
                    ...state,
                    deleted: action.deleted
                };
        case 'DELETE_USER_ERROR':
            return {
                ...state,
                deleteError: action.error
            };
        default: 
            return state;
    };
};

这是我的组件Users.js

       import React, { Component } from 'react';
import { connect } from 'react-redux';

import { fetchUsers, deleteUser } from '../../redux/Actions';

import User from './User';

class Users extends Component {
    componentDidMount() {
        this.props.fetchUsers();
    }

    shouldRender = () => {
        const { users } = this.props;
        if (users.length !== 0) return true;
        return false;
    };

    shouldRerender = () => {
        const { deleted } = this.props;
        if (deleted) {
            this.forceUpdate();
            return true;
        };
        return false;
    };

    render() {
        const { users, fetchError, deleteError } = this.props;

        if (!this.shouldRender() || !this.shouldRerender()) {
            return (
                <div className='container'>
                    <div className='row'>
                        <div className='col-12 mt-5 pt-5'>
                            <p>Loading!</p>
                        </div>
                    </div>
                </div>
            );
        } else {
            return (
                <div className='container'>
                    <div className='row'>
                        <div className='col-12 mt-5 pt-5'>
                            {fetchError && <p>{fetchError}</p>}
                            {deleteError && <p>{deleteError}</p>}
                            <table className="table table-striped table-dark">
                                <thead>
                                    <tr>
                                        <th scope="col">#</th>
                                        <th scope="col">Name</th>
                                        <th scope="col">Email</th>
                                        <th scope="col">Delete</th>
                                    </tr>
                                </thead>
                                <tbody>
                                    {users.map(user => <User key={user.id} user={user} deleteUser={deleteUser} />)}
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            );
        };
    }
};

const mapStateToProps = state => ({
    users: state.users,
    fetchError: state.fetchError,
    deleted: state.deleted,
    deleteError: state.deleteError
});

const mapDispatchToProps = dispatch => ({
    fetchUsers: () => dispatch(fetchUsers()),
    deleteUser: (id) => dispatch(deleteUser(id))
});

export default connect(
    mapStateToProps,
    mapDispatchToProps
)(Users);

这是我的App.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter as Router } from 'react-router-dom';
import { createStore, applyMiddleware } from 'redux';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';

import { usersReducer } from './redux/Reducers';

import App from './App';

import * as serviceWorker from './serviceWorker';

const store = createStore(usersReducer, applyMiddleware(thunk));

ReactDOM.render(
    <Router>
        <Provider store={store}>
            <App />
        </Provider>
    </Router>
, document.getElementById('root'));

serviceWorker.unregister();

任何思想都会受到重视。提前致谢！

P.S。

我能够确定我没有将id参数传递给内部函数，而该内部函数可以通过此修改后的代码来确认。

export const deleteUser = id => {
    console.log('id1: ', id);
    return (dispatch, id) => {
        console.log('id2: ', id);
        fetch(`${BASE_ENDPOINT}/users/${id}`, {
            method: 'DELETE'
        })
            .then(res => res.json())
            .then(res => {
                if (res.error) throw Error(res.error);
                dispatch(deleteUserSuccess(true));
                return res;
            })
            .catch(error => dispatch(deleteUserError(error)));
    };
};

只有console.log的ID1！