在单个点击事件处理器中调用多个不同action的dispatch是否合理？

请问在单个点击事件处理器中调用多个针对不同action的dispatch是否合理？每个dispatch对应的函数会从JSON文件中获取数据，并根据传入参数的值输出过滤后的数组。

点击事件处理器代码 #

const handleBtnClick = () => {
        dispatch({
            type: ACTIONS_CITY.CONVERT_CITY_NAME,
            payload: convertCityNameToCoordinates(value) //根据城市名称查找并返回该城市的坐标
        })                                               

        dispatch({
            type: ACTIONS_CITY.CHANGE_REGION,
            payload: getRegion(value) //根据城市名称查找并返回其所属地区
        })

        dispatch({
            type: ACTIONS_CITY.CHANGE_POPULATION,
            payload: getPopulation(value) //返回指定城市的人口数据
        })
}

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
    }
}

回答 #

这种写法是合理的，但可以根据实际场景做优化，具体分析如下：

• 功能合理性：
  点击按钮后需要同步更新多个关联状态（城市坐标、所属地区、人口），拆分多个dispatch能让每个action的职责更单一，Reducer里的逻辑也更清晰，符合Redux的设计原则，后续维护时更容易定位每个状态更新的逻辑。

• 性能与优化方向：
  每个dispatch都会触发一次Redux状态更新和依赖组件的重渲染。如果这三个状态更新是强关联的操作，也可以合并成一个action，一次性更新所有字段，减少不必要的重渲染次数。比如新增一个UPDATE_CITY_DETAILS的action，在payload中传入坐标、地区、人口三个数据，Reducer里一次完成三个状态的更新。

• 代码修正提示：
  当前Reducer里存在一个错误：[state.cityCoordinates]这种写法会把state.cityCoordinates的当前值作为对象键名，而不是使用固定的状态字段名。正确的写法应该直接指定字段名，比如：

  return {
      ...state,
      cityCoordinates: action.payload
  }
  

  否则会导致状态更新不符合预期。

内容的提问来源于stack exchange，提问作者Ivan Gleym