Is it a good idea to have many dispatches in one event handler?

Could you explain if it is a good idea or not to put many dispatches on different actions in one click handler? Each dispatch has the function, which gets data from a JSON file and outputs the filtered array according to the value in the argument.

const handleBtnClick = () => {
        dispatch({
            type: ACTIONS_CITY.CONVERT_CITY_NAME,
            payload: convertCityNameToCoordinates(value) //finds a city name and returns coordinates of the city
        })                                               

        dispatch({
            type: ACTIONS_CITY.CHANGE_REGION,
            payload: getRegion(value) //finds a city name and return its region
        })

        dispatch({
            type: ACTIONS_CITY.CHANGE_POPULATION,
            payload: getPopulation(value) //return a population of provided city
        })
}

Reducer

export const cityReducer = (state, action) => {
    switch (action.type) {
        case (ACTIONS_CITY.CONVERT_CITY_NAME): {
            return {
                ...state,
                [state.cityCoordinates]: action.payload
            }
        }
        case (ACTIONS_CITY.CHANGE_POPULATION): {
            return {
                ...state,
                [state.population]: action.payload
            }

        }
        case (ACTIONS_CITY.CHANGE_REGION): {
            return {
                ...state,
                [state.region]: action.payload
            }
        }
        default:
            return state
    }
}

One of the best practices is:

Avoid Dispatching Many Actions Sequentially

> Avoid dispatching many actions in a row to accomplish a larger conceptual "transaction". This is legal, but will usually result in multiple relatively expensive UI updates, and some of the intermediate states could be potentially invalid by other parts of the application logic. Prefer dispatching a single "event"-type action that results in all of the appropriate state updates at once, or consider use of action batching addons to dispatch multiple actions with only a single UI update at the end.

Reason 1. Multiple state updates cause multiple renders.

If you are using React <18 version and dispatch many actions sequentially in setTimeout(), promise.then(resolveCallback), you should use batch() API from react-redux which use React.unstable_batchedUpdates() API underly to allow any React updates in an event loop tick to be batched together into a single render pass.

Since handleBtnClick seems like an event handler, you don't need to use the batch() API. React already uses this internally for its own event handler callbacks.

Reason 2. Intermediate states

> In addition, multiple dispatches that are conceptually part of a larger "transaction"-style update sequence will result in intermediate states that might not be considered valid

If we can update the state once, why should we update it three times?

The way to improve is to dispatch a single action with all three payloads

import React from 'react';

const ACTIONS_CITY = {
	CONVERT_CITY_NAME: 'CONVERT_CITY_NAME',
	CHANGE_POPULATION: 'CHANGE_POPULATION',
	CHANGE_REGION: 'CHANGE_REGION',
	CHANGE_CITY: 'CHANGE_CITY',
};

const cityReducer = (state, action) => {
	switch (action.type) {
		case ACTIONS_CITY.CHANGE_CITY: {
			return {
				...state,
				...action.payload,
			};
		}
		case ACTIONS_CITY.CONVERT_CITY_NAME: {
			return {
				...state,
				[state.cityCoordinates]: action.payload,
			};
		}
		case ACTIONS_CITY.CHANGE_POPULATION: {
			return {
				...state,
				[state.population]: action.payload,
			};
		}
		case ACTIONS_CITY.CHANGE_REGION: {
			return {
				...state,
				[state.region]: action.payload,
			};
		}
		default:
			return state;
	}
};

export default function App() {
	const [city, dispatch] = React.useReducer(cityReducer, { cityCoordinates: '100', population: 10000, region: 'japan' });
	console.log(city);
	const handleBtnClick = () => {
		dispatch({
			type: ACTIONS_CITY.CHANGE_CITY,
			payload: {
				cityCoordinates: '120',
				population: 20000,
				region: 'U.S',
			},
		});
	};

	return (
		<div className="App">
			<button onClick={handleBtnClick}>click me</button>
		</div>
	);
}

codesandbox

Further reading: Should I dispatch multiple actions in a row from one action creator?