React-Redux not dispatching action type

Question

Here is react/redux application. This a basic stripped down version of what I am trying to accomplish. showFolder() produces a list of folders and a button to click where it calls the removeFolder action from FolderActions.js. The button works and will call the function in FolderActions.js however will not dispatch the type. The functions works as I can see the console.log message but will not dispatch the type using redux..

I have a strong feeling it's the way I'm calling the function however I am lost at the moment

import {
  addFolder,
  getFolder,
  removeFolder,

} from "../../../actions/FolderActions";

class Folders extends Component {

  onRemoveFolder = (e,id) => {
    e.preventDefault();
    console.log(id);
    this.props.removeFolder(id);
  };

  showFolders = () => {
    return (
      <ul>
        {this.props.folder.map((key, index) => (          
            <form onSubmit={(e) => this.onRemoveFolder(e,key._id)}>
              <input type="submit"></input>
            </form>
        ))}
      </ul>
    );
  };

  render() {
    let { isShown } = this.state;
    return (
         <div>
          <div className="folder_names">{this.showFolders()}</div>
        </div> 
    );
  }
}
const mapStateToProps = state => {
  return {
    userId: state.auth.user._id,
    folder: state.folder.data
  };
};

export default connect(mapStateToProps, {removeFolder,addFolder,getFolder})(
  Folders
);

FolderActions.js

export const removeFolder = id => dispatch => {
  console.log("called")
  axios
    .delete(`api/folders/${id}`)
    .then(res =>
      dispatch({
        type: DELETE_FOLDER,
        payload: id
      })
    )
    .catch(err => {
      console.log(err);
    });
};

Answer 1

Correct me if I'm wrong but my server never sent a response.

Because the server never sent a response, when I made a request, res is not true so cannot dispatch the type and payload.

Sorry for wasting peoples time!