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

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
%d人のブロガーが「いいね」をつけました。