React/Redux中如何从无状态兄弟组件派发action更新全局状态

针对你提到的场景——两个无关联兄弟组件中，类组件可通过props获取componentConfigUpdated action，而无状态函数组件无法获取该props但需要调用同一个action——可以用以下几种方式解决：

方案1：通过父组件传递action #

既然两个组件是兄弟关系，父组件肯定能获取到componentConfigUpdated action（或者能dispatch它），直接把这个action作为props传递给无状态函数组件即可。这样函数组件就能像类组件一样，直接调用props里的componentConfigUpdated。

方案2：使用useDispatch Hook（推荐，适用于React-Redux v7+或Redux Toolkit） #

在无状态函数组件中，直接通过useDispatch Hook获取dispatch方法，然后导入对应的action creator，手动dispatch这个action：

import { useDispatch } from 'react-redux';
// 导入你的action creator
import { componentConfigUpdated } from './actions';

const YourFunctionalComponent = (props) => {
  const dispatch = useDispatch();

  const loadLayerComponentConfig = async () => {
    // 复制原逻辑计算layerComponentConfig和styleId
    const { styleConfig, statusState, datasetState } = /* 函数组件对应的状态，内部状态用useState */;
    const { layer } = props;
    let layerComponentConfig = {};
    layerComponentConfig.status = statusState;
    layerComponentConfig.dataset = datasetState[statusState];

    // 直接dispatch action
    dispatch(componentConfigUpdated(layerComponentConfig, layer.defaultStyle.id));
  };

  // 组件其他渲染逻辑
  return <div>...</div>;
};

方案3：改造公共方法，让它接受dispatch参数 #

把原有的loadLayerComponentConfig方法提取成独立的工具函数，不再依赖组件的props，而是把dispatch（或action函数）作为参数传入：

// 提取到单独的工具文件，比如utils.js
export const loadLayerComponentConfig = async (stateData, componentProps, dispatch) => {
  const { styleConfig, statusState, datasetState } = stateData;
  const { layer } = componentProps;
  let layerComponentConfig = {};
  layerComponentConfig.status = statusState;
  layerComponentConfig.dataset = datasetState[statusState];

  // 调用dispatch触发action
  dispatch(componentConfigUpdated(layerComponentConfig, layer.defaultStyle.id));
};

// 类组件中调用：
import { loadLayerComponentConfig } from './utils';

class ClassComponent extends React.Component {
  someMethod = async () => {
    await loadLayerComponentConfig(this.state, this.props, this.props.dispatch);
  };
}

// 函数组件中调用：
import { useDispatch } from 'react-redux';
import { loadLayerComponentConfig } from './utils';

const FunctionalComponent = (props) => {
  const dispatch = useDispatch();
  const [statusState, setStatusState] = useState(/* 初始值 */);
  const [datasetState, setDatasetState] = useState(/* 初始值 */);

  const handleLoad = async () => {
    await loadLayerComponentConfig({ statusState, datasetState }, props, dispatch);
  };
};

方案4：使用connect高阶组件（传统Redux方式） #

如果你的项目还在使用传统的Redux连接方式，可以用connect把action映射到函数组件的props中：

import { connect } from 'react-redux';
import { componentConfigUpdated } from './actions';

const FunctionalComponent = ({ componentConfigUpdated, layer }) => {
  const loadLayerComponentConfig = async () => {
    // 计算layerComponentConfig的逻辑
    let layerComponentConfig = {};
    // ... 填充配置内容

    componentConfigUpdated(layerComponentConfig, layer.defaultStyle.id);
  };

  return <div>...</div>;
};

// 把action映射到props
export default connect(null, { componentConfigUpdated })(FunctionalComponent);

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