ReactにおいてuseReducerとuseStateの違いについて

Question

#概要
ReactのuseReducerについて勉強しています。useStateに比べてuseReducerを利用するメリットがわかりません。

stateの内容が単純な文字や数値ではなく、オブジェクトが入っている場合にはuseReducerが良いと薄っすら記憶しているのですが、useStateでも出来そうだと思います。

#コード
useStateの場合

const [val, setVal] = React.useState({
  login: false,username: ''
})
const updateHandler = e => {
  setVal({
    ...value,
    [e.target.name]: e.target.value
  });
};

useReducerの場合

const reducer = (state,action) =>{
  switch(action.type) {
    case 'change':
      return { ...state, ...action.payload };
    case "reset-color":
      return {login: false,username: ''};
    default:
      return state; 
    }
}
const [state, dispatch] = React.useReducer(reducer, {
  login: false,username: ''
});

const updateHandler = e =>{
  dispatch({
    type: 'change',
    payload:{
      login: true ,username: e.target.value
    }
  })
}

#質問
Reduxを使わない為、あまりreducerのありがたさがわかりません。

1. useReducerを使いべきケースや、特別なメリットはありますか？
2. useContextと一緒に使いたいと思います。useContextで利用する場合、useReducerの方が良い場合はありますか？

Answer 1

useReducerを使いべきケースや、特別なメリットはありますか？

1回の更新で、複雑な演算が入ってオブジェクトのプロパティが多数書き換わるようなものを作る場合は、「(前の値, 変更内容) => 新しい値」という一定の書式で扱えるreducerが便利です。

useContextで利用する場合、useReducerの方が良い場合はありますか？

特にuseStateと変わりません。

Comments

[yuki_90453]

いつもありがとうございます。
しっくり来ました。ありがとうございます。