import { useEffect } from 'react' ; import { useDispatch , useSelector } from 'react-redux' ; import { useSnackbar } from 'notistack' ; import { notificationsSelector } from 'selectors/app.selector' ; import { removeSnackbar } from 'actions/app.action' ; let displayed = [ ] ; const Notifier = ( ) => { const dispatch = useDispatch ( ) ; const notifications = useSelector ( notificationsSelector ) ; const { enqueueSnackbar } = useSnackbar ( ) ; const storeDisplayed = ( id ) => { displayed = [ ... displayed , id ] ; } ; const removeDisplayed = ( id ) => { displayed = [ ... displayed . filter ( ( key ) => id !== key ) ] ; } ; useEffect ( ( ) => { Object . values ( notifications ) . forEach ( ( ele ) => { if ( displayed . includes ( ele . key ) ) return ; enqueueSnackbar ( ele . message , { key : ele . key , variant : ele . variant , onExited : ( _ , keySnackBar ) => { dispatch ( removeSnackbar ( keySnackBar ) ) ; removeDisplayed ( keySnackBar ) ; } , } ) ; storeDisplayed ( ele . key ) ; } ) ; } , [ notifications , enqueueSnackbar , dispatch ] ) ; return null ; } ; export default Notifier ;