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 {