immerを使いましょう!

reactのステータス管理を理解してください!

reactは簡単な比較で状態管理を行うことが知られている.すなわち、比較的浅いためにpushなどを直接変更すると、反応に変化が検出されないため、再レンダリングは行われない.

なぜイメルを使うのですか?

ただし、展開演算子を使用すると値を変更するたびにかなり不便です.しかも深ければ深いほど不便です.
immerを例にとると、正式なドキュメントを表示すると Immer simplifies handling immutable data structuresがあります.そこでimmerを使いました.
まずimmerの使い方を知りましょう.
正式なドキュメントでは、

に表示されます.
Productにより不変オブジェクトを管理し、最初のパラメータはステータス値を入力します.2番目のパラメータはdraftをパラメータとし、アイテムの状態を変更する関数を渡します.

import produce from "immer"
const nextState = produce(baseState, draft => {
    draft[1].done = true
    draft.push({title: "Tweet about it"})
})

const baseState = [
    /* as is */
]

const nextState = toggleTodo(baseState, "Immer")

そうです.すなわちdraftで現在値を変更すればよい.
ただし、すべてのreduceではproductで値を変更するのは不便な方法かもしれません.そこで、カスタム減速機を作ってあげました.

createReducer関数の作成

export function createReducer(initialState, handlerMap) {
  return function (state = initialState, action) {
    const handler = handlerMap[action.type];
    if (handler) {
      return produce(state, (draft) => {
        handler(draft, action);
      });
    } else {
      return state;
    }
  };
}

createReducerは、2つのパラメータの初期設定を受け入れます.
次に動きがあれば、動きに合ったハンドルを見つけて生産します.
たとえば、SetUserという名前のアクションタイプが呼び出された場合.

(state, action) => {
    state.name = action.name;
    state.isLogin = action.name ? "Login" : "NotLogin";
  },

これらのプロセッサはマッピングされます.
次にhandlerが存在する場合はproductを返します.
初期INITは動作に入るのでhandlerはありませんので、handlerがなければ例外処理をしなければなりません.
また、航続機では動作が発生し、状態が変化しなければ元の状態に戻らなければならない.
(このエラーの検索に時間がかかりました…)
このようにcreateReducerを作成すれば、Reducerでは特に不変性に注意する必要はありません.

createReducerの使用

const reducer = createReducer(INITIAL_STATE, {
  [Types.SetUser]: (state, action) => {
    state.name = action.name;
    state.isLogin = action.name ? "Login" : "NotLogin";
  },
});

このように快適に使えばいいのです!
コメントドキュメント📖
immer docs