Redux动作的调度顺序

如何解决Redux动作的调度顺序

我正在使用redux，react-boostrap和react编写项目！我的fetch操作始终在我的delete操作之前的问题，这导致已删除项目在屏幕上显示的问题，因此我必须刷新窗口才能解决该问题，并且这很烦人！

// delete.js (when user click on menu this js will invoked a Modal to popup on a new route)
import React,{ Component } from 'react';
import Modals from '../../Modals';
import { connect } from 'react-redux';
import { fetch_count,delete_count } from '../../actions/action';
class DeleteCount extends Component {
  componentDidMount() {
    this.props.fetch_count(this.props.match.params.id);
  }
  render() {
    console.log('renderingDeleteCount');
    return (
      <div className="vh-100" style={{ backgroundColor: 'gainsboro' }}>
        <Modals
          fullName={
            this.props.targetInfo ? this.props.targetInfo.fullName : 'unknown'
          }
          rates={
            this.props.targetInfo ? this.props.targetInfo.rates : 'unknown'
          }
          handleDelete={() =>
            this.props.delete_count(this.props.match.params.id)
          }
        />
      </div>
    );
  }
}
const mapStateToProps = (state,ownProps) => {
  return { targetInfo: state.countReducers[ownProps.match.params.id] };
};

export default connect(mapStateToProps,{
  fetch_count,delete_count,})(DeleteCount);

下面是modal.js（它是从delete.js接收props.handleDelete，在调用props.handleDelete之后，我使用onExited来调用history.push（）将路线更改回菜单）

// Modal.js (it is receiving props.handleDelete from delete.js,after props.handleDelete is called,i use onExited to call history.push() to change the route back to menu )
    import React,{ useState } from 'react';
    import ReactDOM from 'react-dom';
    import { Modal,Button } from 'react-bootstrap';
    import { Link } from 'react-router-dom';
    import history from './history';
    function Modals(props) {
      const [show,setShow] = useState(true);
    
      const handleClose = () => setShow(false);
    
      return ReactDOM.createPortal(
        <>
          <Modal
            show={show}
            onHide={handleClose}
            backdrop="static"
            keyboard={false}
            onExited={() => history.push('/countable')}
          >
            <Modal.Header>
              <Modal.Title>Modal title</Modal.Title>
            </Modal.Header>
            <Modal.Body>
              Do you really want to delete <strong>{props.fullName}</strong>,rating{' '}
              <strong>{props.rates}</strong>'s file?`
            </Modal.Body>
            <Modal.Footer>
              <Link to="/countable">
                <Button variant="secondary">Close</Button>
              </Link>
              <Link to="/countable">
                <Button variant="primary" onClick={() => props.handleDelete()}>
                  Delete
                </Button>
              </Link>
            </Modal.Footer>
          </Modal>
        </>,document.querySelector('#modal')
      );
    }
    
    export default Modals;
    

menu.js

import React,{ Component } from 'react';

import { connect } from 'react-redux';
import { fetch_counts } from '../../actions/action';
import { Container,Card,Button } from 'react-bootstrap';
import { Link } from 'react-router-dom';
import { signed_In } from '../../actions/action';
import Modals from '../../Modals';
class MenuCount extends Component {
  componentDidMount() {
    this.props.fetch_counts();
  }

  renderList() {
    console.log('renderingMenuCount');
    return this.props.datas.map((data) => {
      return (
        <Card className="mt-3 shadow" key={this.props.datas.uuid}>
          <div>{console.log(this.props.isSignedIn)}</div>
          <div> {console.log(this.props.userInfo)}</div>
          <Card.Header as="h5">{data.fullName}</Card.Header>
          <Card.Body>
            <Card.Text>
              <strong> Rating:</strong>
              {data.rates === 'Choose...' ? '  no data' : `   ${data.rates}`}
            </Card.Text>
            <Card.Text>
              <strong>Gender:</strong>
              {data.genders === 'Choose...'
                ? '  no data'
                : `   ${data.genders}`}
            </Card.Text>
            <Card.Text>
              <strong>feedback:</strong>
              {data.feedback === '' ? '  no feedbacks' : `    ${data.feedback}`}
            </Card.Text>
            {this.props.userInfo &&
            data.userId === this.props.userInfo.userId ? (
              <>
                <Link to={`/countable/editCount/${data.uuid}`}>
                  <Button variant="primary m-2">edit</Button>
                </Link>
                <Link to={`/countable/deleteCount/${data.uuid}`}>
                  <Button variant="primary m-2">delete</Button>
                </Link>
              </>
            ) : null}
          </Card.Body>
        </Card>
      );
    });
  }

  renderButton() {
    if (this.props.isSignedIn)
      return (
        <Link to="/countable/createCount/new">
          <Button variant="primary m-5">Create new Ex's</Button>
        </Link>
      );
  }

  render() {
    return (
      <div className="" style={{ backgroundColor: 'gainsboro' }}>
        <Container fluid className="pr-5 pl-5 pt-5">
          <div
            style={{ justifyContent: 'center',backgroundColor: 'gainsboro' }}
          >
            {this.renderList()}
          </div>
          {this.renderButton()}
          {/* <Link to="countable/createCount/new">
            <Button variant="primary m-5">Create new Ex's</Button>
          </Link> */}
        </Container>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  // console.log(state.reducers.userInfo);
  // console.log(state.reducers.userInfo.userId);
  return {
    datas: Object.values(state.countReducers),isSignedIn: state.reducers.isSignedIn,userInfo: state.reducers.userInfo,};
};
export default connect(mapStateToProps,{
  fetch_counts,signed_In,})(MenuCount);

        

我的删除操作

export const delete_count = (uuid) => {
  return async (dispatch) => {
    await instance.delete(`/data/${uuid}`);
    dispatch({
      type: DELETE_COUNT,payload: uuid,});
    // history.push('/countable');
  };
};

我的删除还原器

  case DELETE_COUNT:
      delete state[action.payload];
      // return state.filter((instances) => instances.uuid !== action.payload);
      return state;

在调用delete_count之后，有什么办法可以使fetchCount调用！