title: React hooks: Hooks way to show the notification
body: <p>I'm working on a project and I've one requirement, that is to show the notifications.</p>
  
  <p>So I'm using react hooks useEffect to do it. </p>
  
  <p>Below is how I'm trying to do.</p>
  
  <pre><code>const showNotification = useSelector(
          state =&gt; state.showNotificationInfo
      );
  
  useEffect(() =&gt; {
          if (showNotification.message !== null &amp;&amp; showNotification.description !== null ) {
              const args = {
                  message: showNotification.message,
                  description: showNotification.description,
                  duration: 0
              };
              notification.open(args);
          }
      }, [showNotification]);
  </code></pre>
  
  <p>Here in the above code I'm fetching the redux's showNotificationInfo value and storing it in the variable called showNotification. By default it will be null. </p>
  
  <p>so whenever showNotification changes except null I want to show the notification.</p>
  
  <p>But my problem here is even if the state is null, it's showing the notification with the null values. I'm not sure where I'm making mistake. Can anyone please suggest me a better way of doing it or correct me if possible.</p>
  
  <p><strong>EDIT 1:</strong></p>
  
  <p>redux state</p>
  
  <pre><code>const initialState = {
      ...
      ...
      ...
      showNotificationInfo: {
          message: null,
          description: null,
          status: null
      }
  };
  
  export default function(state = initialState, action) {
      switch (action.type) {
          case SET_NOTIFICATION_INFO:
              return {
                  ...state,
                  showNotificationInfo: {
                      ...state.showNotificationInfo,
                      message: action.payload.title,
                      description: action.payload.message,
                      status: action.payload.status
                  }
              };
      }
  }
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>Component code:</p>
  
  <pre><code>import React, { Fragment, useEffect } from "react";
  import { useSelector, useDispatch } from "react-redux";
  import { notification } from "antd";
  
  const ShowNotificationsComponent = () =&gt; {
      const showNotification = useSelector(
          state =&gt; state.showNotificationInfo
      );
  
      useEffect(() =&gt; {
          if (showNotification.message !== null &amp;&amp; showNotification.description !== null) {
              const args = {
                  message: showNotification.message,
                  description: showNotification.description,
                  duration: 0
              };
              notification.open(args);
          }
      }, [showNotification]);
  
      return (
          &lt;Fragment&gt;&lt;/Fragment&gt;
      );
  };
  
  export default ShowNotificationsComponent;
  </code></pre>
  
  <p><strong>EDIT 3 :</strong></p>
  
  <p>Action creator code</p>
  
  <p>So here what I'm doing is whenever I press a button this action creator will be called and sets the redux state (i.e showNotificationInfo) to null and from the backend side I will get the new notification value and I dispatch the new notification value to the store.</p>
  
  <pre><code>export const moveToMyList = () =&gt; dispatch =&gt; {
      const setMoveToListInfoToNull = {
          message: null,
          description: null,
          status: null
      };
  
      dispatch({
          type: SET_SHOW_NOTIFICATION_INFO,
          payload: setMoveToListInfoToNull 
      });
  
      return axios({
          method: "post",
          url: API_URL 
      })
          .then(res =&gt; {
              const moveToMyListInfo= {};
  
              moveToMyListInfo["title"] = res.data.message;
              moveToMyListInfo["message"] = res.data.description;
              moveToMyListInfo["status"] = res.data.status;
  
              dispatch({
                  type: SET_SHOW_NOTIFICATION_INFO,
                  payload: moveToMyListInfo
              });
          })
          .catch(e =&gt; {
              console.log(e.response);
          });
  };
  </code></pre>
  
  <p>This notification component I'm using is a child component. Even if parent component re-renders, this notification component (child component) is getting displayed regardless of the redux state.</p>