我如何从另一个不是反应组件的文件中调用 useReducer 调度函数？（不使用 Redux）答案

【问题标题】：How do i call a useReducer dispatch function from another file, which is not a react component? (without using Redux)我如何从另一个不是反应组件的文件中调用 useReducer 调度函数？（不使用 Redux）
【发布时间】：2021-06-09 21:22:13
【问题描述】：

我有一个显示游戏板的功能组件：“EnemyBoardComponent.tsx”

const enemyBoardReducer = (state:number[][], action:Action)=>{
 switch(action.type){
   case "update":
   {
      return EnemyBoard.getGrid(); 
   }
 }
}
const EnemyBoardComponent: React.FC<Props> = (props) => {
  const [enemyBoard, enemyBoardDispatch] = useReducer(enemyBoardReducer,EnemyBoard.getGrid());
  const handleClick = (posX: number, posY: number) => {
    GameController.sendAttack(posX, posY);
  };
  return (
    <div className="gameboard">
      //code to map the gameboard
    </div>
  );
};
export { EnemyBoardComponent };

在“GameController.ts”文件中，当我收到来自服务器的响应时，我想向该组件发送一个动作。

const GameController = (() => {
  const updateEnemyBoard = (grid: number[][]) => {
    EnemyBoard.setGrid(grid);
    // need to call enemyBoardDispatch({type: "update"}) from here
  };
  return {
    sendAttack,
    receiveAttack,
    updateEnemyBoard,
  };
})();

export { GameController };

这类似于这个问题，但我没有在我的项目中使用 redux。有可能这样做还是我应该考虑使用 redux？

【问题讨论】：

UseReducer 钩子
我已经在使用 useReducer 钩子了。我的问题是如何从另一个文件调度一个动作。
看起来钩子可以而且只能从 React 函数组件中调用 reactjs.org/docs/hooks-rules.html
我明白了，这也适用于调度吗？我不想在组件之外调用钩子。只需要发送一个动作来更新状态。我需要使用问题中链接帖子中提到的 redux 吗？

标签： javascript reactjs typescript redux

【解决方案1】：

简短的回答是：“你不能”。 Hooks 只能在 React 函数组件内部调用，useReducer 钩子返回的 dispatch 函数只能在该函数组件范围内访问。

您可以假设性地采用dispatch 函数并将其传递给其他模块，以便在需要时调用，但这会有点复杂。

我在这里的主要观察是，示例代码显示了一种非常 OOP 风格的方法来解决这个问题，这与使用 reducer 的方式完全相反。我建议尝试重新考虑“控制器”逻辑，并在减速器本身内部进行管理。这就是 reducer 的强大之处——你宣布“这个事件发生了”，然后让 reducer 负责确定实际的状态更新需要是什么。

【讨论】：

我同意，我已经重构了我的代码，以获得更简洁的方法来触发重新渲染。（传递一个改变的道具），但我只是好奇这是否可能。感谢您的回答。