普段思ったことや、雑記。

Menu & Search

Redux(react-redux)における適切な配列要素の更新

2021年8月9日

2021年8月23日追記: 

後半おかしなことが書いてあったので、削除・修正しました

 

表題の件について、Reduxのreducerにおける配列要素の更新について、正常動作しないサンプルコードと、正常動作するサンプルコードを記載する。reducerの状態を表す引数の値をstateとし、actionの入力値をpayloadとする。

場合によっては、結構動いていまうが、正常動作しない実装のサンプルコードは以下である。

state[payload.index] = payload.value;
return [...state];

// スプレッドオペレータで、元となるstate配列と同値を取る配列を、メモリを新しく確保して生成すればOKだと思っていた

一方で、正常動作する実装のサンプルコードである。

return [
    ...state.slice(0, payload.index),
    value,
    ...state.slice(payload.index + 1),
];

失敗をふまえて、ライブラリの公式ドキュメントを読みましょう(Redux公式には、上記の正常動作の実装を含め、かなり丁寧な実装パターンの資料がある)、というのと、MDNの言語仕様リファレンスを読みましょう、という反省になった。なお、配列要素の更新でなくて、配列への要素の追加、削除あたりはRedux公式を参照していた模様である(更新のみ、雰囲気でやってしまっていた)。

MDNのリファレンスをよく確認したところ、Javascriptのスプレッドオペレータでは、こちらにある記述の通り、意図するようなdeep copyではなかった、ということである。

その他の参考文献

javascript – How to update single value inside specific array item in redux – Stack Overflow

https://stackoverflow.com/questions/35628774/how-to-update-single-value-inside-specific-array-item-in-redux

Article Tags
mmiyauchi

プログラムを書きながらTranceを聴くのが良いですね。みなさんも聴いたほうがいいですよ、Trance。EDMよりハードトランスでしょ。

Related article

CloudFlareの『SSL/TLS 暗号化モード(HTTPS通信設定)』を使用したとき、『ERR SSL VERSION OR CIPHER MISMATCH』のエラーでChromeで発生し、接続できない場合の対処

英語の記事は見当たっ…

Dart(Flutter)についての所見

Dart(Flutter)についての所見

第一印象では、クロス…

クソコードとは何であるか

そういえば、クソなコ…

Discussion about this post

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

Type your search keyword, and press enter to search