Hook - useReducer

4309 ワード
React useReducer reactHook テキストリンク

ぶんりじょうたいへんかロジック

  • 構成部品を管理する多くの状態変化処理関数は複雑になります
  • は、構成部品で使用されている状態のように取り外し可能である

    • 取り外しながら理解しましょう!

    const reducer = (state, action) => {
  switch (action.type) {
    case "EDIT": {
      return action.data;
    }
    //...생략
  }
}

function App() {
  
  const [state, dispatch] = useReducer(reducer, []);

  const onEdit = (targetId, date, content, emotion) => {
    dispatch({
      type: "EDIT",
      data: {
        id: targetId,
        date: new Date(date).getTime(),
        content,
        emotion,
      },
    });
  };
  //...생략
}
  • 状態の初期値[]は空の配列
  • dispatch()で渡されるオブジェクトを「動作オブジェクト」と呼びます.
    =>action=状態変化
  • onEditという関数でdispatch()が呼び出されるとreduce()の2番目のパラメータ(action)に送信されます.
    =>reduce()でactionオブジェクトのtypeをswitchのcase識別として使用
    =>actionオブジェクトのデータ
    • 공부하며 정리&기록하는 ._. 씅로그
    MVCは表をExcelに書き出す
    [アルゴリズム/規格]1063号:King(python)