[Refactoring] Refactoring through code review

package.json

@@ -41,6 +41,7 @@
     "react-moment": "^1.0.0",
     "react-redux": "^7.2.2",
     "react-router-dom": "^5.2.0",
+    "react-use": "^15.3.4",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "redux-logger": "^3.0.6"

src/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import { useDispatch } from 'react-redux';
 import { Switch, Route } from 'react-router-dom';
@@ -18,11 +18,13 @@ const App = () => {
 
   const user = loadItem('user');
 
-  if (user) {
-    const { email } = user;
+  useEffect(() => {
+    if (user) {
+      const { email } = user;
 
-    dispatch(setUser(email));
-  }
+      dispatch(setUser(email));
+    }
+  }, [dispatch, user]);
 
   return (
     <>

src/containers/auth/LoginFormContainer.jsx

@@ -1,10 +1,13 @@
 import React, { useCallback, useEffect } from 'react';
 
+import { useUnmount } from 'react-use';
 import { useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { get } from '../../util/utils';
-import { changeAuthField, clearAuth, requestLogin } from '../../reducers/slice';
+import {
+  changeAuthField, clearAuth, clearAuthFields, requestLogin,
+} from '../../reducers/slice';
 
 import AuthForm from '../../components/auth/AuthForm';
 
@@ -43,9 +46,10 @@ const LoginFormContainer = () => {
     }
   }, [user, authError]);
 
-  useEffect(() => () => {
+  useUnmount(() => {
+    dispatch(clearAuthFields());
     dispatch(clearAuth());
-  }, [dispatch]);
+  });
 
   return (
     <AuthForm

src/containers/auth/RegisterFormContainer.jsx

@@ -1,10 +1,13 @@
 import React, { useCallback, useEffect } from 'react';
 
+import { useUnmount } from 'react-use';
 import { useHistory } from 'react-router-dom';
 import { useSelector, useDispatch } from 'react-redux';
 
 import { get } from '../../util/utils';
-import { changeAuthField, clearAuth, requestRegister } from '../../reducers/slice';
+import {
+  changeAuthField, clearAuth, clearAuthFields, requestRegister,
+} from '../../reducers/slice';
 
 import AuthForm from '../../components/auth/AuthForm';
 
@@ -50,9 +53,10 @@ const RegisterFormContainer = () => {
     }
   }, [auth, authError]);
 
-  useEffect(() => () => {
+  useUnmount(() => {
+    dispatch(clearAuthFields());
     dispatch(clearAuth());
-  }, [dispatch]);
+  });
 
   return (
     <AuthForm

src/containers/write/WriteFormContainer.jsx

@@ -1,5 +1,6 @@
-import React, { useEffect } from 'react';
+import React from 'react';
 
+import { useUnmount } from 'react-use';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { get } from '../../util/utils';
@@ -21,9 +22,7 @@ const WriteFormContainer = () => {
     );
   };
 
-  useEffect(() => () => {
-    dispatch(clearWriteFields());
-  }, [dispatch]);
+  useUnmount(() => dispatch(clearWriteFields()));
 
   return (
     <WriteForm

src/reducers/slice.js

@@ -200,10 +200,8 @@ export const requestRegister = () => async (dispatch, getState) => {
     const { user } = await postUserRegister({ userEmail, password });
 
     dispatch(setAuth(user.email));
-
-    dispatch(clearAuthFields());
   } catch (error) {
-    setAuthError(error);
+    dispatch(setAuthError(error.code));
   }
 };
 
@@ -220,9 +218,8 @@ export const requestLogin = () => async (dispatch, getState) => {
     });
 
     dispatch(setUser(email));
-    dispatch(clearAuthFields());
   } catch (error) {
-    setAuthError(error);
+    dispatch(setAuthError(error.code));
   }
 };
 

src/reducers/slice.test.js

@@ -380,7 +380,6 @@ describe('async actions', () => {
         const actions = store.getActions();
 
         expect(actions[0]).toEqual(setAuth(userEmail));
-        expect(actions[1]).toEqual(clearAuthFields());
       });
     });
 
@@ -428,7 +427,6 @@ describe('async actions', () => {
         const actions = store.getActions();
 
         expect(actions[0]).toEqual(setUser(userEmail));
-        expect(actions[1]).toEqual(clearAuthFields());
       });
     });