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?

CodePudding user response：

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