diff --git a/examples/redux-example/App.js b/examples/redux-example/App.js index 2bc270cb..045a854e 100755 --- a/examples/redux-example/App.js +++ b/examples/redux-example/App.js @@ -1,32 +1,37 @@ import React, { Fragment } from 'react'; -import { connect } from 'react-redux'; -import { bindActionCreators } from 'redux'; +import { useDispatch } from 'react-redux'; import Typography from '@material-ui/core/Typography'; import Button from '@material-ui/core/Button'; import Notifier from './Notifier'; -import { enqueueSnackbar, closeSnackbar } from './redux/actions'; +import { + enqueueSnackbar as enqueueSnackbarAction, + closeSnackbar as closeSnackbarAction, +} from './redux/actions'; -const App = (props) => { - const handleClick = () => { +const App = () => { + const dispatch = useDispatch(); + const enqueueSnackbar = (...args) => dispatch(enqueueSnackbarAction(...args)); + const closeSnackbar = (...args) => dispatch(closeSnackbarAction(...args)); + const handleClick = () => { // NOTE: - // if you want to be able to dispatch a `closeSnackbar` action later on, + // if you want to be able to dispatch a `closeSnackbar` action later on, // you SHOULD pass your own `key` in the options. `key` can be any sequence - // of number or characters, but it has to be unique to a given snackbar. - props.enqueueSnackbar({ + // of number or characters, but it has to be unique for a given snackbar. + enqueueSnackbar({ message: 'Failed fetching data.', options: { key: new Date().getTime() + Math.random(), variant: 'warning', action: key => ( - + ), }, }); }; const handleDimissAll = () => { - props.closeSnackbar(); + closeSnackbar(); }; return ( @@ -40,9 +45,4 @@ const App = (props) => { ); }; -const mapDispatchToProps = dispatch => bindActionCreators({ - enqueueSnackbar, - closeSnackbar, -}, dispatch); - -export default connect(null, mapDispatchToProps)(App); +export default App; diff --git a/examples/redux-example/Notifier.js b/examples/redux-example/Notifier.js index c734076c..8d5fe9a3 100755 --- a/examples/redux-example/Notifier.js +++ b/examples/redux-example/Notifier.js @@ -1,63 +1,56 @@ -/* eslint-disable react/prop-types */ -import React, { Component } from 'react'; -import { bindActionCreators } from 'redux'; -import { connect } from 'react-redux'; -import { withSnackbar } from 'notistack'; +import React from 'react'; +import { useDispatch, useSelector } from 'react-redux'; +import { useSnackbar } from 'notistack'; import { removeSnackbar } from './redux/actions'; -class Notifier extends Component { - displayed = []; - - storeDisplayed = (id) => { - this.displayed = [...this.displayed, id]; - }; +let displayed = []; +const Notifier = () => { + const dispatch = useDispatch(); + const notifications = useSelector(store => store.app.notifications || []); + const { enqueueSnackbar, closeSnackbar } = useSnackbar(); - removeDisplayed = (id) => { - this.displayed = this.displayed.filter(key => id !== key) - } + const storeDisplayed = (id) => { + displayed = [...displayed, id]; + }; - componentDidUpdate() { - const { notifications = [] } = this.props; + const removeDisplayed = (id) => { + displayed = [...displayed.filter(key => id !== key)]; + }; + React.useEffect(() => { notifications.forEach(({ key, message, options = {}, dismissed = false }) => { if (dismissed) { - this.props.closeSnackbar(key) - return + // dismiss snackbar using notistack + closeSnackbar(key); + return; } - // Do nothing if snackbar is already displayed - if (this.displayed.includes(key)) return; - // Display snackbar using notistack - this.props.enqueueSnackbar(message, { + + // do nothing if snackbar is already displayed + if (displayed.includes(key)) return; + + // display snackbar using notistack + enqueueSnackbar(message, { key, ...options, - onClose: (event, reason, key) => { + onClose: (event, reason, myKey) => { if (options.onClose) { - options.onClose(event, reason, key); + options.onClose(event, reason, myKey); } }, - onExited: (event, key) => { - this.props.removeSnackbar(key); - this.removeDisplayed(key) - } + onExited: (event, myKey) => { + // removen this snackbar from redux store + dispatch(removeSnackbar(myKey)); + removeDisplayed(myKey); + }, }); - // Keep track of snackbars that we've displayed - this.storeDisplayed(key); - }); - } - render() { - return null; - } -} - -const mapStateToProps = store => ({ - notifications: store.app.notifications, -}); + // keep track of snackbars that we've displayed + storeDisplayed(key); + }); + }, [notifications, closeSnackbar, enqueueSnackbar, dispatch]); -const mapDispatchToProps = dispatch => bindActionCreators({ removeSnackbar }, dispatch); + return null; +}; -export default withSnackbar(connect( - mapStateToProps, - mapDispatchToProps, -)(Notifier)); +export default Notifier; diff --git a/examples/redux-example/redux/actions.js b/examples/redux-example/redux/actions.js index d7b3580d..62d4ade7 100644 --- a/examples/redux-example/redux/actions.js +++ b/examples/redux-example/redux/actions.js @@ -2,7 +2,7 @@ export const ENQUEUE_SNACKBAR = 'ENQUEUE_SNACKBAR'; export const CLOSE_SNACKBAR = 'CLOSE_SNACKBAR'; export const REMOVE_SNACKBAR = 'REMOVE_SNACKBAR'; -export const enqueueSnackbar = notification => { +export const enqueueSnackbar = (notification) => { const key = notification.options && notification.options.key; return { diff --git a/examples/redux-example/redux/reducers.js b/examples/redux-example/redux/reducers.js index c35b5311..e795f11e 100644 --- a/examples/redux-example/redux/reducers.js +++ b/examples/redux-example/redux/reducers.js @@ -26,7 +26,7 @@ export default (state = defaultState, action) => { ? { ...notification, dismissed: true } : { ...notification } )), - } + }; case REMOVE_SNACKBAR: return {