ReactJS中如何从一个函数调用另一函数触发Redux dispatch修改状态

核心错误原因 #

你定义的JammingMenu是被Redux connect 高阶组件包裹的React组件，不是可直接调用的普通函数：

• 直接调用JammingMenu()时没有传入dispatch参数，函数内dispatch为undefined，自然不会执行alert和后续状态修改逻辑
• connect只有在组件被React正常渲染时，才会自动注入Redux的dispatch和mapStateToProps返回的状态数据到组件props中

推荐解决方案：抽离公共Action逻辑 #

把修改Jamming菜单状态的逻辑抽成独立的Redux Action，所有需要触发该操作的地方直接调用即可，无需依赖组件调用：

1. 新增/修改Redux Action文件

// Redux/Actions/MainControllerActions.js
import { SHOW_JAMMING_MENU } from "Redux/ActionTypes/MainControllerTypes";

export const showJammingMenu = () => ({
  type: SHOW_JAMMING_MENU,
  showjamming: true
})

2. 修改Overview组件接入Action

// 引入抽离的Action
import { showJammingMenu } from "Redux/Actions/MainControllerActions";

// 新增mapDispatchToProps把Action注入组件props
const mapDispatchToProps = dispatch => ({
  triggerShowJammingMenu: () => dispatch(showJammingMenu())
})

// 组件内获取注入的方法
const Overview = ({ subTabSelected, subTabSelectedFromNewWin, triggerShowJammingMenu }) => {
  // 修改单元格渲染逻辑，直接调用注入的方法
  const actionColumn = sensorSelectedInfo =>
    <div className="d-flex justify-content-around align-items-center">
        <div className="flex-column" onClick={triggerShowJammingMenu}>
            <RiRadarFill size={25} />
        </div>
    </div>;

  // 其余原有逻辑保持不变
}

// 导出时传入mapDispatchToProps
export default connect(mapStateToProps, mapDispatchToProps)(Overview);

备选方案：改造JammingMenu为普通工具函数 #

如果JammingMenu不需要渲染UI，仅用于触发Redux状态修改，直接改成接收dispatch作为参数的普通函数即可：

// Jammingmenu.js修改后内容
import { SHOW_JAMMING_MENU } from "Redux/ActionTypes/MainControllerTypes";

export const triggerJammingMenu = (dispatch) => {
    alert("This is Function")
    dispatch({type: SHOW_JAMMING_MENU, showjamming: true});
}

调用时直接传入组件props中的dispatch即可：

const Overview = ({ subTabSelected, subTabSelectedFromNewWin, dispatch }) => {
  const showDeletingHandler = () => {
    triggerJammingMenu(dispatch)
  }
  // 其余逻辑保持不变
}

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