typescript - Redux toolkit uppdaterar inte array av array-objekt


Jag försöker uppdatera ett objekt som är inbäddat i en array av arrayer.

state = [[{away: "Southampton "
awayTeamScore: null
date: "Sat, October 30th 2021"
dateNative: "2021-10-30T14:00:00Z"
home: "Watford "
homeTeamScore: null
matchId: 327264
matchday: 10
score: "null - null"
time: "16:00"
winner: null}, {..etc}], [{..etc}]]

Jag skickar min nyttolast som ser ut så här:

{matchId: 327264
score: 1
team: "awayTeamScore"}

Men mitt redux-tillstånd uppdateras inte, jag försökte följa de officiella dokumenten angående immer etc.

Mitt försök till reducer, med användning av createSlice:

import { createSlice, current } from "@reduxjs/toolkit";

export const predictFormSlice: any = createSlice({
    name: "predictForm",
    initialState: [],
    reducers: {
        SAVE_FIXTURES: (state: any, action) => {
            state.push(action.payload);
        },
        UPDATE_PREDICTIONS: (state: any, action) => {
            state = state[0].map((element: any[]) => {
                let game = element.find((game: { matchId: any }) => game.matchId === action.payload.matchId);

                if (game) {
                    game = action.payload;
                }
            });
        },
    },
});

export const { SAVE_FIXTURES, UPDATE_PREDICTIONS } = predictFormSlice.actions;

export default predictFormSlice.reducer;

Det vore trevligt att bara uppdatera nyckeln för awayTeamScore och homeTeamScore genom att använda matchId inne i reduktorn. Min action skickar nyttolasten framgångsrikt till UPDATE_PREDICTION-reduktorn, men uppdaterar bara inte tillståndet. Jag försökte först ersätta objektet helt innan jag bara fokuserade på vissa nycklar.

Svar #1

Flera saker här:

  • du förväxlar att modifiera ett objekt och att tilldela en variabel på nytt. Du kan göra variableName.foo=5 och det kommer att ändra egenskapen foo hos variableName till 5. Men om du istället skulle göra let foo=variableName.foo; foo=5, skulle du tilldela värdet 5 till variabeln foo, men det skulle inte finnas någon koppling till variableName längre - variableName skulle inte ändras. Du gör detta med både state och game här: du tilldelar om båda variablerna, men du "ändrar" ingenting.
  • du skapar en helt ny array med .map - du behöver inte göra det i en immer-reducer.

Detta skulle gå till på detta sätt med en "objektmodifierande" metod istället för att tilldela saker på nytt.

        UPDATE_PREDICTIONS: (state: any, action) => {
            for (const element of state[0]) {
                let idx = element.findIndex((game: { matchId: any }) => game.matchId === action.payload.matchId);

                if (idx >= 0) {
                    element[idx] = action.payload;
                }
            };
        },