Redux - Tief verschachtelte Store-Requisiten mit dem Spread-Operator aktualisieren

Question

Ich baue eine relativ große Web-App mit react + redux und der Umgang mit meinem Laden wird wirklich verwirrend.

kam ich mit einem Problem auf bei der Aktualisierung der verschachtelten Objekte im Speicher und gefunden Immutable Update Patterns Abschnitt redux docs, die ich so etwas wie dies tun soll, zeigen an:

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

Und ich habe so getan, und als Ergebnis einige Teile meiner Reduzierungen suchen wie folgt aus:

. 
. 
. 
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 
        } 
       } 
       }, 
      } 
      }, 
     } 
     } 
. 
. 
. 

ich denke, Sie stimmen zu, dass mein Code wird immer mehr verwirrend als es sein sollte. Meine Frage ist nicht die Leistung der von redux docs empfohlenen Art (obwohl es sich anfühlt wie eine Menge Arbeit für eine Aktion, die in meinem Fall fast jede Sekunde verschickt wird) und ich nehme an, es ist der beste Weg.

Meine Frage betrifft die Lesbarkeit meines Codes. Gibt es einen Ansatz, der meinen Reduzierer sauberer machen kann?

Eigentlich verwende ich react-redux-form für einige meiner riesigen Formen, nicht, weil ich alle Funktionen dieser Bibliothek, sondern nur eine Funktion benötigt. Mit dieser Bibliothek kann ich ein riesiges Formularmodell mit vielen verschachtelten Daten erstellen. Ich muss lediglich die Modellroute zur Eingabe hinzufügen, damit die vordefinierten onChange-Ereignisse funktionieren und die zugehörigen Werte aktualisiert werden.

Ist diese Bibliothek so mit Spread-Operator unter seiner Haube?

Gibt es eine andere Möglichkeit, einen Index zu einigen Eingaben hinzuzufügen und den zugehörigen Wert im Speicher mit diesem Index zu aktualisieren, wenn der Eingabewert geändert wird?

Answer 1

Ich habe tatsächlich Dutzende von Dienstprogrammen dafür in redux docs gefunden! Immutable Update Utilities

und ich denke, dot-prop-immutable ist ziemlich einfach und geradlinig.