基于全局状态展示游戏界面组件的优化方案咨询

针对你当前的游戏界面实现，下面是几个提升代码优雅度和可扩展性的优化方向，直接上干货：

1. 中心化游戏配置 #

把所有游戏的元数据（对应组件、描述、路由标识等）统一放到一个配置对象里，新增游戏时只需要在配置里加条目，不用修改渲染逻辑。

2. 用状态枚举替代多布尔值 #

原来的showIntro/showSuccess/showFail这类布尔值容易出现状态冲突（比如同时触发成功和失败），换成枚举类型的状态（比如gameStatus: 'intro' | 'playing' | 'success' | 'fail'），逻辑更清晰，也避免状态互斥问题。

3. 组件拆分与逻辑解耦 #

把重复的布局（比如带StatusBar的界面）抽成布局组件，减少代码重复；把渲染逻辑从Game组件里拆出来，让主组件更简洁。

4. 优化路由参数处理 #

简化gameId的处理，直接用路由参数匹配配置，不用额外替换字符（如果路由参数本身就是game1这类格式的话）。

优化后完整代码 #

import { useParams } from "react-router-dom";
import { useSelector } from "react-redux";

// Import views and components
import Step1 from "../Intro/Step1";
import StatusBar from "../../components/StatusBar/StatusBar";
import Game1 from "./Games/Game1/Game1";
import Game2 from "./Games/Game2/Game2";
import Intro from "./Intro/Intro";
import Success from "./Success/Success";
import Fail from "./Fail/Fail";
import FailBeginOnStart from "./Fail/FailBeginOnStart";

// 中心化游戏配置：新增游戏只需在这里添加条目
const GAME_CONFIGS = {
  game1: {
    component: Game1,
    desc: "some description for game 1",
  },
  game2: {
    component: Game2,
    desc: "some description for game 2",
  },
};

// 布局组件：封装带StatusBar的通用界面
const WithStatusBar = ({ children }) => (
  <>
    <StatusBar />
    {children}
  </>
);

function Game() {
  // 从Redux获取状态：用枚举类型的gameStatus替代多个布尔值
  const gameStatus = useSelector((state) => state.game.status);
  const selectedLanguage = useSelector((state) => state.game.selectedLanguage);

  // 获取路由参数
  const { game: gameId } = useParams();
  const currentGameConfig = GAME_CONFIGS[gameId];

  // 根据状态渲染对应界面
  const renderScreen = () => {
    switch (gameStatus) {
      case "intro":
        return (
          <WithStatusBar>
            <Intro path={gameId} id={gameId} data={currentGameConfig?.desc} />
          </WithStatusBar>
        );
      case "success":
        return (
          <WithStatusBar>
            <Success data={currentGameConfig?.desc} />
          </WithStatusBar>
        );
      case "fail":
        return (
          <WithStatusBar>
            <Fail data={currentGameConfig?.desc} />
          </WithStatusBar>
        );
      case "playing":
        // 匹配游戏组件，没有则返回Step1
        const GameComponent = currentGameConfig?.component || Step1;
        return <GameComponent data={currentGameConfig?.desc} />;
      default:
        return <Step1 />;
    }
  };

  return <>{renderScreen()}</>;
}

export default Game;

额外优化建议 #

• 状态管理优化：在Redux的slice里，用createSlice封装状态切换的action（比如setStatus('intro')），避免直接修改状态，保证状态变更的统一性。
• 错误处理：如果路由参数对应的游戏不存在，可以渲染一个404游戏界面，提升用户体验。
• 类型安全：如果用TypeScript，可以给GAME_CONFIGS和gameStatus定义类型，避免拼写错误。

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