如何更改动作创建器 function 中组件的内部 state 属性

Question

I am working on a React application and I am using Redux to store the state. I have the following code:

category-arrows.component.jsx:

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

class CategoryArrows extends Component {

    state = {
        isSending: false
    }

    render() {

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

        return (
            <div className="arrows-container">
                <div className="up-arrow" onClick={
                    () => {
                        if(this.state.isSending === false) {
                            this.props.increaseCategoryRank(category, categoryClicked)
                        }
                        this.props.fetchCategoryRanks(this.props.menu);
                }}></div>
                <div className="category-rank">
                    <p>{category.rank}</p>
                </div>
                <div className="down-arrow" onClick={
                    () => {
                        if(this.state.isSending === false) {
                            this.props.decreaseCategoryRank(category, categoryClicked)
                        }
                        this.props.fetchCategoryRanks(this.props.menu);
                }}></div>
            </div>
        )
    }
}

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

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

menu.actions.js:

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

export const decreaseCategoryRank = (category, categoryClicked) => dispatch => {
    dispatch({ type: DECREASE_CATEGORY_RANK, category, categoryClicked })
}

export const increaseCategoryRank = (category, categoryClicked)  => dispatch => {
    dispatch({ type: INCREASE_CATEGORY_RANK, category, categoryClicked })
}

export const fetchCategoryRanks = menu => async dispatch => {
    console.log("Printing menu (fetch category ranks)");
    console.log(menu);

    var sentRequests = 0;

    menu.map(async (category) => {

        const menuLength = menu.length;

        const options = {
            ...apiConfig(),
            method: 'PUT',
            body: JSON.stringify(category)
        }
        const response = await fetch(`${apiUrl}/category/${category._id}`, options)
        let data = await response.json()
        if (response.ok) {
            console.log("It got sent")
            sentRequests++;
            console.log("Printing sentRequests");
            console.log(sentRequests);
            if(sentRequests === menuLength) {
                console.log("All the requests have been sent");
            }
        } else {
            alert(data.error)
        }
    });

    dispatch({ type: FETCH_CATEGORY_RANKS, menu });
}

menu.types.js:

export const INCREASE_CATEGORY_RANK = "INCREASE_CATEGORY_RANK";
export const DECREASE_CATEGORY_RANK = "DECREASE_CATEGORY_RANK";
export const FETCH_CATEGORY_RANKS = "FETCH_CATEGORY_RANKS";

menu.reducer.js:

// import INITIAL_STATE from './menu.data';
import { INCREASE_CATEGORY_RANK, DECREASE_CATEGORY_RANK, FETCH_CATEGORY_RANKS } from './menu.types';

const INITIAL_STATE = []


export default (state = INITIAL_STATE, action) => {
    switch (action.type) {

        case INCREASE_CATEGORY_RANK: {
            console.log("Went into increase category rank");

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

            const menuArray = [...state];

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

            //if it's the first element in array it won't move up
            if(index === 0) {
                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;
            }

        }
        case DECREASE_CATEGORY_RANK: {
            console.log("Went into 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 it's the last element in the array, it won't move down
            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;
            }
        }
        case FETCH_CATEGORY_RANKS:
            return state;
        default:
            return state;
    }
}

In my CategoryArrows component I have a state property called isSending which is set to false . In my fetchCategoryRanks action creator, I am sending information about categories from the menu array in the state to a server using fetch .

I would like to be able to set the isSending property from the CategoryArrows component to true or false , depending on certain conditions in the function fetchCategoryRanks .

However, I am not sure what the best way to do this is. Any insights are appreciated.

Answer 1

First way

You can change internal state by sending a callback function to your axios api call. Before the axios request starts you can call that callback function from axios api function to set isSending=true and after request completed again call callback function to set isSending=false . Callback function implementation must be in component from where you are calling axios api.

Api call

this.props.fetchCategoryRanks(this.props.menu, (response) => {
    if (isRequestStart) {
        this.setState({
            isSending: true
        });
    }
    if (!isRequestStart) {
        this.setState({
            isSending: false
        });
    }
});

Below is your fetch request

export const fetchCategoryRanks = (menu, callback) => async dispatch => {
    var sentRequests = 0;
    menu.map(async (category) => {
        const menuLength = menu.length;
        callback({
            isRequestStart: true
        });
        const options = {
            ...apiConfig(),
            method: 'PUT',
            body: JSON.stringify(category)
        }
        const response = await
        fetch(`${apiUrl}/category/${category._id}`, options)
        let data = await response.json()
        if (response.ok) {
            callback({
                isRequestStart: false
            });
            console.log("It got sent")
            sentRequests++;
            console.log("Printing sentRequests");
            console.log(sentRequests);
            if (sentRequests === menuLength) {
                console.log("All the requests have been sent");
            }
        } else {
            alert(data.error);
            callback({
                isRequestStart: false
            });
        }
    });
    dispatch({
        type: FETCH_CATEGORY_RANKS,
        menu
    });
}

Second way

You can use a reducer where you can set initial state of isSending by dispatching a function from the axios api, calling the dispatch function same as above. And you can use that reducer state into your component.