https://ginpen.com/2018/12/23/array-reduce/
functional programming で map と共に必ず紹介されるメソッドです。
functional programmingの特徴をかなり簡単に紹介すると、
・「元データを更新せず元データを元に新しいデータを作成する(イミュータブル)」
・「関数に関数を渡す」
といったところです。
https://codewords.recurse.com/issues/one/an-introduction-to-functional-programming
const result = array.reduce((前回の値, 現在の値, 現在の値のインデックス, reduceによって操作している配列全て) => {
return 次の値;
}, 初期値);
Array.reduce は 「単一の値を返します」
初期値について
・初期値を渡さないと、 インデックス=1 (2番目の値)から処理を始めます。
・初期値を渡すと、最初の値から、インデックス=0 から処理を始めます。
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
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
になります。
const [state, dispatch] = useReducer(reducer, initialState);
useReducerは以下の引数を受け取ります。
・引数
reducer : stateを更新するための関数。stateとactionを受け取って、新しいstateを返す。
(state, action 共に、数値や配列やオブジェクト、どのような値も受け取ることが可能です。)
initialState : stateの初期値
・戻り値
state : state(コンポーネントの状態)
dispatch : reducerを実行するための呼び出し関数
・useReducerは、ステートに依存するロジックをステートに非依存な関数オブジェクト(dispatch)で表現することができる点が本質である。
このことはReact.memoによるパフォーマンス改善につながる。
・useReducerを活かすには、ステートを一つにまとめることで、ロジックをなるべくreducerに詰め込む。
React は state の変更の有無の判定に Object.is() を使うとのことなので、現在の state を表す array を直接変更するのではなく別の array を新たに生成して setBookmarks() に渡せば OK です。
reduceRight() は Array インスタンスのメソッドで、アキュームレーターと配列のそれぞれの値に対して(右から左へ)関数を適用して、単一の値にします。
const array1 = [
[0, 1],
[2, 3],
[4, 5],
];
const result = array1.reduceRight((accumulator, currentValue) =>
accumulator.concat(currentValue),
);
console.log(result);
// Expected output: Array [4, 5, 2, 3, 0, 1]
引用: https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Global_Objects/Array/reduceRight