Reactガイドを読んでいくその264

これは

Reactのガイドを読んでいく記事です。

ガイドのリンク

ja.reactjs.org

useYourImagination()

カスタムフックによってロジック共有に関する柔軟性を得ることができる。
必要に応じて様々なカスタムフックを使うことができる。

function todosReducer(state, action) {
  switch (action.type) {
    case 'add':
      return [...state, {
        text: action.text,
        completed: false
      }];
    // ... other actions ...
    default:
      return state;
  }
}

リデューサーは単独でのテストがやりやすい、複雑なロジックでもスケールすることができる。
React のローカル state による手軽さの方が好ましい場合も中にはある。
useReducer というカスタムフックを作って管理することもできる。

function useReducer(reducer, initialState) {
  const [state, setState] = useState(initialState);

  function dispatch(action) {
    const nextState = reducer(state, action);
    setState(nextState);
  }

  return [state, dispatch];
}

ローカルステートをリデューサで管理したいという場面は多いので次からもう少し詳しく見ていく。

今日はここまで。