[Snackbar] Add a simple notification method(), showing global Snackbars (especially for reducers)

Duplicates

• I have searched the existing issues

Latest version

• I have tested the latest version

Summary 💡

Current scenerio 😯

Currently, in MUI we only have snackbars that should be used in such a way that can be rendered as HTML (JSX syntax) i.e

<Snackbar
  open={open}
  autoHideDuration={6000}
  onClose={handleClose}
  message="Note archived"
  action={action}
/>

OR

<Alert severity="error">This is an error message!</Alert>

New and required behavior 🤔

But what if we have to generate a snackbar from within the reducer i.e

  name: "userMatches",
  initialState: {
    matchesData: {
      matches: [],
    },
  },
  reducers: {
    getMatches: (state, { payload }) => {
      state.loading = true;
    },
    getMatchesSuccess: (state, { payload }) => {
      state.loading = false;
      state.matchesData.matches = payload.matchData;
    },
    getMatchesFailed: (state, { payload }) => {
      state.loading = false;
       👉 // notification.error(payload.message);
       👉 notification.success(payload.message);

    },
}
})

So currently we are not able to do that in reducers and have to install another package, or have to create the global and to do a bunch of stuff to achieve the functionality

Sumup 🙌

A simple calling method to show the notification or snackbar for some specific task, a method that can be called from anywhere of the application

Examples 🌈

No response

Motivation 🔦

We can check this scenario working here, as Antd implemented it

https://ant.design/components/notification/

Start by reading the existing Snackbar and Alert usage, then compare the requested reducer call pattern with Ant Design's notification API. Done means a globally callable notification method can show success and error snackbars from application code, including reducers, without requiring each caller to render a Snackbar.