I am dispatching actions with a dispatch function from within child components available via context api.
const NotificationProvider = (props) => {
const [state, dispatch] = useReducer((state, action) => {
switch (action.type) {
case "ADD_NOTIFICATION":
return [...state, {...action.payload}];
case "REMOVE_NOTIFICATION":
return state.filter(el => el.id !== action.id);
default:
return state
}
}, []);
How can I keep (maximum) only latest 3 elements from the state?
Add the payload to the front of the notifications and then slice off the rest (this way you also have latest notifications upfront.
case "ADD_NOTIFICATION":
return [{...action.payload}, ...(state.slice(0,2))];
}