foggy gale
Hello everyone. I'm trying to update a nested object in the NGRX Store (ignore the styling) but in the image with the red box those boxes update based on certain conditions with the item (item status, too much time in station, etc.. ) When one of these conditions is met there is a stored boolean value that changes the color of the box. The issue I'm having is that there is a number value on the station object that stores the amount of errors (red boxes) and displays it so the user can easily see how many issues a particular station is having.
The call to the reducer is
this.store.dispatch(updateStationErrors({ station: this.station, wasWarning: this.warningTrigger }));
and the state, and reducers look like this
interface Business {
lines: Line[];
}
export interface BusinessState {
business: Business;
}
export const initialBusinessState = {
lines: [new Line(1)],
}
export const businessReducer = createReducer(
initialBusinessState,
on(BusinessActions.setLines, (state, action) => {
return {
lines: action.lines
}
}),
on(BusinessActions.updateStationWarnings, (state, action) => {
return state;
}),
on(BusinessActions.updateStationErrors, (state, action) => {
state.lines.map((value, index) => {
for (let i = 0; i < value.numOfSteps; i++) {
if (value.steps[i].stationId == action.station.stationId) {
if (action.wasWarning) {
state.lines[index].steps[i].errors--;
}
state.lines[index].steps[i].warnings++;
}
}
});
return state;
}),
);
this isn't the correct way to update state in ngrx. I've tried spread notation before but I get confused by it and when its nested it gets complicated (to me).
Action code for BusinessActions.updateStationErrors
export const updateStationErrors = createAction(
"[Business Overview] Update station errors",
props<{station:Station, wasWarning: boolean}>()
)
idle gale
