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

[shoaibshebi]

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/

[lindapaiste]

As a redux best practice, I would not recommend creating a snackbar from inside the reducer itself because reducers should be free of side effects. It would be best to call the function notification.success(payload.message) from a middleware, such as the RTK listener middleware. But that's a separate issue and does not have any impact on how MUI would implement an imperative snackbar call.

[skyddyyu]

I had the same problem and wanted to add global method calls.

[mvshvets]

I have the same problems. I want to handle errors in responses in interceptors in axios. To implement, I need a global function. notification by antd looks like the perfect solution, but I'm already using MUI.
My code example:

import AxiosStatic, { AxiosError, AxiosInstance } from 'axios'

const errorResponseInterceptor = (error: AxiosError): Promise<AxiosError> => {
  const { response } = error
  switch (response?.status) {
    case 500:
      // here need to call an error notification for 500
      break
    case 400:
      // here need to call an error notification for 400
      break
    default:
      console.log(response?.data)
  }

  return Promise.reject(error.response)
}

axiosInstance.interceptors.response.use(
  Promise.resolve,
  errorResponseInterceptor
)

Using the notification in this way makes it possible to make the UI/ux uniform and saves the developer from resorting to third-party libraries.

[MonstraG]

Here is an example implementation that seems to be working for me:
https://gist.github.com/MonstraG/02e2c5a51784a80d60d724143a5753f8