Fixes #205 - Use hooks in redux-example

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 => (
-                    <Button onClick={() => props.closeSnackbar(key)}>dissmiss me</Button>
+                    <Button onClick={() => closeSnackbar(key)}>dismiss me</Button>
                 ),
             },
         });
     };
 
     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;

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;

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 {

examples/redux-example/redux/reducers.js

@@ -26,7 +26,7 @@ export default (state = defaultState, action) => {
                         ? { ...notification, dismissed: true }
                         : { ...notification }
                 )),
-            }
+            };
 
         case REMOVE_SNACKBAR:
             return {