Filter Arrays in einem Reducer - Redux

Question

Nach einer Reaktion Tutorial, sehe ich diesen Code in einem Druckminderer eine Nachricht von einem Array mit seiner ID zu entfernen:

Wäre das nicht besser geschrieben werden als:

else if (action.type === 'DELETE_MESSAGE') { return { messages: [ ...state.messages.filter(m => m.id === action.id) ], }; };

ich dachte für eine Sekunde, dass filter Zustand ändern könnte und die gleiche Array zurück, sondern nach MDN es erstellt ein neues Array.

Bin ich sicher, und ist meine Implementierung korrekt?

Answer 1

Ja. Es wäre tatsächlich eine sehr saubere Lösung. Der Trick ist, dass in Array#filter jedes Element eines Arrays mit einer Funktion angewendet wird, die mehr als ein Argument akzeptiert. Das zweite Argument ist der Index des Elements im Quell-Array.

So gegeben, dass Sie den Index wissen, es ist einfach

(state, action) => ({ 
    ...state, 
    messages: state.messages.filter((item, index) => index !== action.index) 
}) 

aber Sie wissen nicht, den Index. Stattdessen haben Sie einen Wert von id Eigentum. In diesem Fall sind Sie richtig, müssen Sie einfach die Quelle Array gegen diese id filtern, um nur Elemente zu setzen, die den Wert von id haben, die nicht gleich Ziel id ist:

(state, action) => ({ 
    ...state, 
    messages: state.messages.filter(item => item.id !== action.id) 
}) 

eine Notiz nimmt: Keine Notwendigkeit, state.messages zu verbreiten und sie in ein neues Array zurück zu legen. Array#filter mutiert nicht das Quell-Array, das ist nett.

So ist es !== statt ===. Du warst nah.