[tsx]useReducer を使ったより複雑な状態管理

use_reduser.tsx

import React, { useReducer } from 'react';

// それぞれのコンポーネント
const ComponentA: React.FC = () => <div>Component A</div>;
const ComponentB: React.FC = () => <div>Component B</div>;
const ComponentC: React.FC = () => <div>Component C</div>;

// reducer のアクション型
type Action = { type: 'showA' } | { type: 'showB' } | { type: 'showC' };

// reducer の実装
const reducer = (state: string, action: Action): string => {
  switch (action.type) {
    case 'showA':
      return 'A';
    case 'showB':
      return 'B';
    case 'showC':
      return 'C';
    default:
      return state;
  }
};

const MyComponent: React.FC = () => {
  // useReducer を使ってステートと dispatch を定義
  const [currentComponent, dispatch] = useReducer(reducer, 'A');

  // ステートに応じたコンポーネントを切り替え
  let renderedComponent;
  switch (currentComponent) {
    case 'A':
      renderedComponent = <ComponentA />;
      break;
    case 'B':
      renderedComponent = <ComponentB />;
      break;
    case 'C':
      renderedComponent = <ComponentC />;
      break;
    default:
      renderedComponent = <div>Invalid Component</div>;
      break;
  }

  return (
    <div>
      <div>
        <button onClick={() => dispatch({ type: 'showA' })}>Show A</button>
        <button onClick={() => dispatch({ type: 'showB' })}>Show B</button>
        <button onClick={() => dispatch({ type: 'showC' })}>Show C</button>
      </div>
      {renderedComponent}
    </div>
  );
};

export default MyComponent;