Wie man ein Element an den Anfang einer Redux-Speicherliste hinzufügt, während das untere Element aus der Liste entfernt wird

Question

Ich möchte nur ein Element aus einer Redux-Speicherliste entfernen, sobald es eine bestimmte Anzahl erreicht hat und den neuen Speicher zurückgibt mit dem neuen Wert, aber minus dem ersten Wert in der Liste (array.shift).

Denken Sie an einen Twitter-Stream, der den Laden füllt, also entfernen wir alle sechs Tweets einen Eintrag vom Ende der Liste und fügen einen neuen hinzu.

Code:

// ------------------------------------ 
// Action Handlers 
// ------------------------------------ 
const ACTION_HANDLERS = { 
    [INIT_DATA]: (state, action) => { 
    if (state.length < 5) { 
     return [ ...state, action.payload.stream ] 
    } else { 
     return [ ...state.shift(), action.payload.stream ] 
    } 
    }, 
    [DISCONNECT]: (state, action) => ({ ...state, ...action.payload }) 
} 
// ------------------------------------ 
// Reducer 
// ------------------------------------ 
const initialState = [] 

export default function twitterStreamReducer (state = initialState, action) { 
    const handler = ACTION_HANDLERS[action.type] 

    return handler ? handler(state, action) : state 
} 

Der obige Code gibt einen neuen Speicher, wenn lentgh> 5 und löscht alle alten Tweets nicht nur die untere.

Irgendwelche Ideen über den besten Weg, es zu tun, ohne den Staat zu mutieren?

Answer 1

können Sie Array.slice verwenden, die eine flache Kopie zurück von Ihrem ursprünglichen Array minus die geschnittenen Elemente. Verwenden Sie nicht shift(), das Ihren Zustand tatsächlich mutiert und alle Arten von Problemen verursachen kann.

return [...state.slice(1), action.payload.stream] 

Answer 2

Array#shift gibt den verschobenen Wert zurück, nicht das Array mit dem entfernten Wert (es wird an Ort und Stelle verschoben).

Sie tun können

state.shift() 
[ ...state, action.payload.steam ] 

obwohl ich ziemlich sicher, dass Redux docs bin angeben, dass Sie direkt auf den Staat handeln vermeiden sollten ...