React-Redux: как убедиться, что действие отправляется перед тем, как будет сделан запрос PUT

Question

Я работаю над приложением React и использую Redux для хранения состояния. У меня есть следующие создатели действий:

menu.actions. js:

import { apiUrl, apiConfig } from '../../util/api';
import { INCREASE_CATEGORY_RANK, DECREASE_CATEGORY_RANK } from './menu.types';

export const decreaseCategoryRank = (category, categoryClicked) => dispatch => {
    console.log("Printing the category");
    console.log(category.name);
    console.log(category.rank);
    dispatch({ type: DECREASE_CATEGORY_RANK, category, categoryClicked })
    fetch(`${apiUrl}/category/${category._id}`, {
        ...apiConfig(),
        method: 'PUT',
        body: JSON.stringify(category),
    });
}

export const increaseCategoryRank = (category, categoryClicked) => dispatch => {
    console.log("Printing the category");
    console.log(category.name);
    console.log(category.rank);
    dispatch({ type: INCREASE_CATEGORY_RANK, category, categoryClicked })
    fetch(`${apiUrl}/category/${category._id}`, {
        ...apiConfig(),
        method: 'PUT',
        body: JSON.stringify(category),
    });
}

menu.reducer. js:

import { GET_MENU, INCREASE_CATEGORY_RANK, DECREASE_CATEGORY_RANK } from './menu.types';

const INITIAL_STATE = []


export default (state = INITIAL_STATE, action) => {
    switch (action.type) {
        case GET_MENU:
            return [ ...action.payload ];

        case INCREASE_CATEGORY_RANK: {

            if(action.categoryClicked === false) {
                return state;
            }

            const menuArray = [...state];

            var index = menuArray.map(category => category._id).indexOf(action.category._id);

            if(index === 0) {
                return state;
            } else {
                const temp = menuArray[index];
                menuArray[index] = menuArray[index - 1];
                menuArray[index - 1] = temp;

                //reassign the ranks.

                var newrank = 0;

                menuArray.forEach(category => {
                     category.rank = newrank++;
                });

                return menuArray;
            }

        }
        case DECREASE_CATEGORY_RANK: {

            if(action.categoryClicked === false) {
                return state;
            }

            const menuArray = [...state];

            console.log(menuArray);

            var index = menuArray.map(category => category._id).indexOf(action.category._id);

            if(index === menuArray.length - 1) {
                return state;
            } else {
                const temp = menuArray[index];
                menuArray[index] = menuArray[index + 1];
                menuArray[index + 1] = temp;


                var newrank = 0;

                menuArray.forEach(category => {
                    category.rank = newrank++;
                });

                return menuArray;
            }
        }
        default:
            return state;
    }
}

Категория-стрелки .component.jsx:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { increaseCategoryRank, decreaseCategoryRank } from '../../redux/menu/menu.actions';
import './category-arrows.styles.scss';

class CategoryArrows extends Component {

    render() {

        const { category } = this.props;
        const categoryClicked = true;

        return (
            <div className="arrows-container">
                <div className="up-arrow" onClick={
                    () => {
                        this.props.increaseCategoryRank(category, categoryClicked)

                        this.props.menu.map(menuCategory => menuCategory._id !== category._id ? this.props.increaseCategoryRank(menuCategory, !categoryClicked) : null)

                }}></div>
                <div className="category-rank">
                    <p>{category.rank}</p>
                </div>
                <div className="down-arrow" onClick={
                    () => {
                        this.props.decreaseCategoryRank(category, categoryClicked)

                        this.props.menu.map(menuCategory => menuCategory._id !== category._id ? this.props.decreaseCategoryRank(menuCategory, !categoryClicked) : null)

                }}></div>
            </div>
        )
    }
}

const mapStateToProps = state => ({
    menu: state.menu
})

export default connect(mapStateToProps, { increaseCategoryRank, decreaseCategoryRank } )(CategoryArrows);

В каждом из моих создателей действий increaseCategoryRank и decreaseCategoryRank я отправляю действие, а также делаю запрос PUT через fetch, отправляя информацию об объекте категории в сервер. Мои действия изменяют ранг объектов категории, находящихся в состоянии.

Однако в моем коде запрос PUT отправляется до того, как действие полностью отправляется, и состояние обновляется с обновленными рангами категории. В результате исходный ранг категории отправляется на сервер. Кроме того, параметр category, передаваемый создателю действия, имеет исходное значение ранга (поскольку действие еще не отправлено).

Я бы хотел, чтобы действие было отправлено до выполнения запроса PUT. , так что я могу отправить обновленный рейтинг категории. Однако я не уверен, как убедиться, что действие завершено и состояние обновлено перед выполнением запроса PUT.

Любое понимание приветствуется.