Aktualisieren der Deep-Eigenschaft eines Objekts mit Redux-Reduzierungen

Question

Ich habe folgende Struktur. Ich habe ein Company Objekt, das viele Person Objekte in einem Array enthält.

companies: CompanyInterface = { 
    persons: PersonInterface[] = [] 
} 

Ich versuche, die Personen, die zu dieser Firma gehören, in einer Tabelle zu zeigen. Wenn ich jedoch Personen zum Array personen hinzufüge/lösche, sollte es automatisch aktualisiert werden.

Im Moment sieht mein Minderer wie folgt aus:

// Initial state 
companies: CompanyInterface[]; 

// Reducer 
case Constants.GLOBAL_COMPANY_ADD_PERSON: 
    [action.payload.person].concat(state.companies.filter(company => company.id === action.payload.id)[0].persons)); 

    return { 
    ...state 
    }; 

Obwohl ich Concat richtig überprüfen können funktioniert (ich kann [Person] sehen, wenn ich es log CONSOLLE) es etwas nicht aktualisiert auf dem Speicher.

Also, was ist der beste Weg, um ein Array in Redux zu aktualisieren, die eine Eigenschaft im übergeordneten Objekt ist?

Vielen Dank.

Answer 1

Sie können sich vielleicht Array.prototype.concat ansehen, da das Array nicht an Ort und Stelle mutiert, sondern returns a new array. In Ihrem Beispiel mutieren Sie den Zustand nicht.

Stattdessen müssen Sie den alten Wert durch den neuen ersetzen. Zum Beispiel:

case 'ADD_ELEMENT': 
    const { elements: previousElements } = state; 
    const newElement = action.payload; 
    const newElements = previousElements.concat(newElement) 
    return { 
     ...state, 
     elements: newElements 
    };