refactor react toastr

components/layout/layout.js

@@ -1,21 +1,18 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classnames from 'classnames';
-import { connect } from 'react-redux';
-import dynamic from 'next/dynamic';
 
 // Components
 import Header from 'components/layout/header';
 import Footer from 'components/layout/footer';
 import Head from 'components/layout/head';
 import Icons from 'components/layout/icons';
 import Modal from 'components/ui/modal';
+import Toastr from 'components/ui/toastr';
 import Notifications from 'components/ui/notifications';
 import RouterSpinner from 'components/layout/router-spinner';
 
-const Toastr = dynamic(() => import('react-redux-toastr'), { ssr: false });
-
-const Layout = ({ title, description, url, children, className, footer, toastr }) => {
+const Layout = ({ title, description, url, children, className, footer }) => {
   const classNames = classnames({
     [className]: !!className
   });
@@ -40,12 +37,7 @@ const Layout = ({ title, description, url, children, className, footer, toastr }
       {footer !== false && <Footer />}
 
       <Modal />
-
-      {toastr && <Toastr
-        preventDuplicates
-        transitionIn="fadeIn"
-        transitionOut="fadeOut"
-      />}
+      <Toastr />
 
       <Notifications />
       <RouterSpinner />
@@ -59,8 +51,7 @@ Layout.propTypes = {
   children: PropTypes.any.isRequired,
   url: PropTypes.object.isRequired,
   className: PropTypes.string,
-  footer: PropTypes.bool,
-  toastr: PropTypes.object
+  footer: PropTypes.bool
 };
 
-export default connect((state) => ({ toastr: state.toastr }))(Layout);
+export default Layout;

components/ui/toastr.js

@@ -0,0 +1,29 @@
+import { useEffect } from 'react';
+import { connect, useStore } from 'react-redux';
+import dynamic from 'next/dynamic';
+
+const ReduxToastr = dynamic(() => import('react-redux-toastr'), { ssr: false });
+
+const Toastr = ({ toastr }) => {
+  const store = useStore();
+
+  useEffect(() => {
+    async function injectReducer() {
+      if (!store.asyncReducers.toastr) {
+        const { reducer: toastrReducer } = await import('react-redux-toastr');
+        store.injectReducer('toastr', toastrReducer);
+      }
+    }
+    injectReducer();
+  }, []);
+
+  if (!toastr) return null;
+
+  return <ReduxToastr
+    preventDuplicates
+    transitionIn="fadeIn"
+    transitionOut="fadeOut"
+  />;
+}
+
+export default connect((state) => ({ toastr: state.toastr }))(Toastr);

pages/_app.js

@@ -52,7 +52,7 @@ const MyApp = ({ Component, ...rest }) => {
   const { store, props } = wrapper.useWrappedStore(rest);
   const { pageProps, defaultLocale, language, messages, url } = props;
 
-  useEffect(async () => {
+  useEffect(() => {
     const state = store.getState();
 
     if (!state.operators.data.length) {
@@ -61,10 +61,6 @@ const MyApp = ({ Component, ...rest }) => {
     if (!state.countries.data.length) {
       store.dispatch(getCountries());
     }
-
-    // TODO: maybe move this to dedicated component that would load toastr with its reducer
-    const { reducer: toastrReducer } = await import('react-redux-toastr');
-    store.injectReducer('toastr', toastrReducer);
   }, []);
 
   if (pageProps.errorCode) {