typescript - Oppdater nestet tilstandsstruktur i Angular/ngrx reducer

Jeg har en nestet tilstandsstruktur som representerer en tidsoppføringstabell. Jeg lagrer en rekke TimeEntryRow-objekter, hvor hvert radobjekt har sin egen rekke med TimeEntry-objekter. Merk at objektene lagrer en indeks som representerer deres posisjon i tabellen.

export interface TimeState {
    timeEntryRows?: TimeEntryRow[];
    ...
}

export class TimeEntryRow {
    rowIndex: number;
    timeEntries: TimeEntry[];
    ...
}

export class TimeEntry {
    cellIndex: number;
    hours: number;
    ...
}

Jeg har en reducer som prøver å oppdatere timene til en enkelt celle i tabellen, men jeg har noen problemer med å få det til å fungere. Med følgende handlingssak forblir tilstanden uendret:

case timeEntryActions.HOURS_CHANGED_ACTION: {
    return {
        ...state,
        timeEntryRows: {
            ...state.timeEntryRows.map(row => {
                return row.rowIndex !== action.payload.rowIndex ? row : {
                    ...row,
                    timeEntries: {
                        ...row.timeEntries.map(te => {
                            return te.cellIndex !== action.payload.cellIndex ? te : {
                                ...te,
                                hours: action.payload.hours
                            }
                        })
                    }
                }
            })
        }
    }
}

Enhver hjelp vil bli sterkt verdsatt.

Svar #1

Det ser ut til at jeg ved et uhell satte mine array-egenskaper timeEntryRows og timeEntries til objekter, i stedet for arrays.

En grunn til til å unngå nestet tilstand så mye som mulig, ettersom reducerne blir lengre og mer kompliserte. Endte opp med å bruke denne Redux-ressursen om hvordan man riktig oppdaterer nestede objekter.

Ny kode:

case timeEntryActions.HOURS_CHANGED_ACTION: {
    return {
        ...state,
        timeEntryRows: state.timeEntryRows.map(row => {
            return row.rowIndex !== action.payload.rowIndex ? row : {
                ...row,
                timeEntries: row.timeEntries.map(te => {
                    return te.cellIndex !== action.payload.cellIndex ? te : {
                        ...te,
                        hours: action.payload.hours
                    }
                })
            }
        })
    }
}

Relaterte artikler