問題一覧に戻る
上級useReducer
問題80: ミドルウェア的処理

ロギングと検証のためのuseReducerでミドルウェアライクなパターンを実装する方法を学びます。reducer関数をラップして前処理と後処理のロジックを追加します。このパターンはロギング、検証、分析などの横断的関心事を可能にします。状態更新でのデバッグやビジネスルールの適用に有用です。

import React, { useReducer } from 'react';

{/* 拡張reducerラッパー */}
function withLogger(reducer) {
  return (state, action) => {
    console.log('Action:', action.type);
    const newState = (state, action);
    console.log('New state:', newState);
    return ;
  };
}

function reducer(state, action) {
  switch (action.type) {
    case 'INCREMENT': return { count: state.count + 1 };
    default: return state;
  }
}

function App() {
  {/* 拡張reducerを使用 */}
  const [state, dispatch] = useReducer((reducer), { count: 0 });

  {/* ラップされたdispatch関数 */}
  const dispatchWithValidation = (action) => {
    if (!action.) {
      console.error('Action must have type');
      return;
    }
    (action);
  };

  return (
    <div>
      <p>{state.count}</p>
      <button onClick={() => ({ type: 'INCREMENT' })}>+</button>
    </div>
  );
}

export default App;