useReducer を理解しやすくする

● (useReducerの理解 1). useReducer を理解する前に 配列の reduce メソッドを復習しておきましょう

https://ginpen.com/2018/12/23/array-reduce/

functional programming で map と共に必ず紹介されるメソッドです。
functional programmingの特徴をかなり簡単に紹介すると、
・「元データを更新せず元データを元に新しいデータを作成する(イミュータブル)」
・「関数に関数を渡す」
といったところです。
https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming

・Array.reduce メソッド

const result = array.reduce((前回の値, 現在の値, 現在の値のインデックス, reduceによって操作している配列全て) => {
    return 次の値;
}, 初期値);
Array.reduce は 「単一の値を返します」

初期値について

・初期値を渡さないと、 インデックス=1 (2番目の値)から処理を始めます。
・初期値を渡すと、最初の値から、インデックス=0  から処理を始めます。

例1. (初期値なし)

const myArray = ['hoge', 'fuga', 'piyo'];

myArray.reduce((acc, cur, index, ar) => {
  console.log( `● acc : ${acc} / ● cur : ${cur}  / ● index : ${index}` );
  return 'xxx';
});

結果

● acc : hoge / ● cur : fuga  / ● index : 1 
● acc : xxx / ● cur : piyo  / ● index : 2 

例2. (初期値あり)初期値が acc にセットされるので配列の最初の値から処理されます

const all_result = myArray.reduce((acc, cur, index, ar) => {
  console.log( `● acc : ${acc} / ● cur : ${cur}  / ● index : ${index}` );

  const result = acc + '__' + cur;
  return result;
  
} , 'saisho');

結果

● acc : saisho / ● cur : hoge  / ● index : 0 
● acc : saisho__hoge / ● cur : fuga  / ● index : 1 
● acc : saisho__hoge__fuga / ● cur : piyo  / ● index : 2 

また最終結果 all_result

saisho__hoge__fuga__piyo 

になります。

● (useReducerの理解 2). useReducer を使ってみる

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

useReducerは以下の引数を受け取ります。

・引数

reducer : stateを更新するための関数。stateとactionを受け取って、新しいstateを返す。
(state, action 共に、数値や配列やオブジェクト、どのような値も受け取ることが可能です。)

initialState : stateの初期値

・戻り値

state : state(コンポーネントの状態)
dispatch : reducerを実行するための呼び出し関数

https://bit.ly/3n3ws5T

・useReducerは、ステートに依存するロジックをステートに非依存な関数オブジェクト(dispatch)で表現することができる点が本質である。
 このことはReact.memoによるパフォーマンス改善につながる。
・useReducerを活かすには、ステートを一つにまとめることで、ロジックをなるべくreducerに詰め込む。

● useReducer を使ってオブジェクトの値を更新したのに再描画が起きない場合

React は state の変更の有無の判定に Object.is() を使うとのことなので、現在の state を表す array を直接変更するのではなく別の array を新たに生成して setBookmarks() に渡せば OK です。
No.2131
09/07 16:17

edit