ReactJS conditional dispatch reducer action

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?

>Solution :

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))];
    }