React useReducerについて

useReducerについて

useReducerはuseState のようなものです。(state, action) => newState という型のリデューサ (reducer) を受け取り、現在の state を dispatch 関数とペアにして返します。

const [state, dispatch] = useReducer(reducer, initialArg, init);

使用例

下記の公式ドキュメントの例を元に説明します。
実装内容はボタンによってカウンターの値を+1,-1できるコンポーネントです。
https://ja.reactjs.org/docs/hooks-reference.html#usereducer

まずは下記のコードがボタンによってカウンターの値を+1,-1できるコンポーネントになります。

const initialState = {count: 0};

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);
  return (
    <>
      Count: {state.count}
      <button onClick={() => dispatch({type: 'decrement'})}>-</button>
      <button onClick={() => dispatch({type: 'increment'})}>+</button>
    </>
  );
}

ステートの初期値定義

まず、ステートの初期値を定義します。

const initialState = {count: 0};

リデューサーの定義

次に、useReducerに渡すリデューサーを定義します。これは現在のステート値stateとdispatch関数の引数として渡されるactionを引数として新しいステート値を返す関数です。
渡されたaction.typeによって新しいステートを変えています。

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return {count: state.count + 1};
    case 'decrement':
      return {count: state.count - 1};
    default:
      throw new Error();
  }
}

useReducer

useReducerを使ってステートとdispatch 関数を定義します。

const [state, dispatch] = useReducer(reducer, initialState);

ボタンの実装

次にカウンターが減算されるボタンについて説明します。クリックされたときにdispatchが引数{type: 'decrement'}で動きます。内部ではreducerのaction.type='decrement'で処理が動きます。結果、state.countの値が-1されます。

<button onClick={() => dispatch({type: 'decrement'})}>-</button>

カウンターが加算されるボタンも上記と同じで、クリックされたときにdispatchが引数{type: 'increment'}で動きます。内部ではreducerのaction.type='increment'で処理が動きます。結果、state.countの値が+1されます。

<button onClick={() => dispatch({type: 'increment'})}>+</button>

以上です。読んでいただきありがとうございました。
誤字、脱字、間違い等ありましたらコメント頂ければ幸いです。