Redux - スプレッド演算子を使用して深くネストされたストアの小道具を更新する

Question

私は比較的大規模なウェブアプリケーションを作成していますが、react + reduxを使用しており、店舗を扱うのは本当に混乱しています。

私は店でネストされたプロパティを更新して問題を思い付いたと私はこのような何かを行う必要があることを示しReduxのドキュメントのImmutable Update Patternsセクションが見つかりました：

function updateVeryNestedField(state, action) { 
    return { 
     ....state, 
     first : { 
      ...state.first, 
      second : { 
       ...state.first.second, 
       [action.someId] : { 
        ...state.first.second[action.someId], 
        fourth : action.someValue 
       } 
      } 
     } 
    } 
} 

をそして、私はそうやったし、その結果、私の減速のいくつかの部分は次のように探しています：

. 
. 
. 
case "CHANGE_RANGED_INPUT": { 
     return { 
      ...state, 
      searchPanel: { 
      ...state.searchPanel, 
      [action.payload.category]: { 
       ...state.searchPanel[action.payload.category], 
       rangedInputs: { 
       ...state.searchPanel[action.payload.category].rangedInputs, 
       [action.payload.type]: { 
        ...state.searchPanel[action.payload.category].rangedInputs[action.payload.type], 
        [action.payload.key]: { 
        ...state.searchPanel[action.payload.category].rangedInputs[action.payload.type][action.payload.key], 
        value: action.payload.value 
        } 
       } 
       }, 
      } 
      }, 
     } 
     } 
. 
. 
. 

私はあなたが私のコードは、それがあるべきより多くの混乱になっていることに同意しますね。私の質問は、redux docsが推奨する方法のパフォーマンスに関するものではありません（私の場合、ほぼ毎秒派遣されるアクションのための多くの仕事のように感じますが）。

私の質問は私のコードの読みやすさです。私の還元剤をきれいにする方法はありますか？

実際に私の巨大なフォームの一部にはreact-redux-formを使用しています。このライブラリが提供するすべての機能が必要なわけではなく、その1つの機能を使用する必要があります。このライブラリーでは、ネストされたものがたくさんある巨大なフォームモデルを作成することができます。事前に定義されているonChangeイベントとその関連値の更新を取得するために、モデルルートを入力に追加するだけです。

このライブラリは、スプレッドオペレータを使用していますか？

入力に一部のインデックスを追加し、入力値が変更されたときにそのインデックスで関連する値をそのインデックスで更新できるような方法はありますか？

Answer 1

私は実際にこれのために何十ものユーティリティをreduxのドキュメントで見つけました！ Immutable Update Utilities

と私はdot-prop-immutableがかなりシンプルで簡単だと思います。