Mejora de la gestión del estado: Evitar la mutación direct

src/components/FormLogin.tsx

@@ -3,14 +3,14 @@ import { useLoginView } from '../hooks/useLoginView';
 import { Input } from './Input';
 
 export function FormLogin() {
-    const { LOGIN_VIEW_STATE } = useLoginView();
+    const { LOGIN_VIEW_STATE, setLoginFields } = useLoginView();
 
     const [identifier, setIdentifier] = useState(LOGIN_VIEW_STATE.loginFields.identifier || '');
     const [password, setPassword] = useState('');
 
     useEffect(() => {
-        LOGIN_VIEW_STATE.loginFields.identifier = identifier;
-    }, [LOGIN_VIEW_STATE.loginFields, identifier]);
+        setLoginFields({ identifier });
+    }, [setLoginFields, identifier]);
 
     return (
         <form className="login-form">

src/components/FormRegister.tsx

@@ -3,7 +3,7 @@ import { useLoginView } from '../hooks/useLoginView';
 import { Input } from './Input';
 
 export function FormRegister() {
-    const { LOGIN_VIEW_STATE } = useLoginView();
+    const { LOGIN_VIEW_STATE, setRegisterFields } = useLoginView();
 
     const [full_name, setFullName] = useState(LOGIN_VIEW_STATE.registerFields.full_name);
     const [username, setUsername] = useState(LOGIN_VIEW_STATE.registerFields.username);
@@ -16,10 +16,8 @@ export function FormRegister() {
     const [passwordError, setPasswordError] = useState(false);
 
     useEffect(() => {
-        LOGIN_VIEW_STATE.registerFields.full_name = full_name;
-        LOGIN_VIEW_STATE.registerFields.username = username;
-        LOGIN_VIEW_STATE.registerFields.email = email;
-    }, [LOGIN_VIEW_STATE.registerFields, full_name, username, email]);
+        setRegisterFields({ full_name, username, email });
+    }, [setRegisterFields, full_name, username, email]);
 
     function handleEmailBlur() {
         if (email && confirmEmail && email !== confirmEmail) {

src/providers/LoginViewProvider.tsx

@@ -1,30 +1,39 @@
-import React from 'react';
+import React, { useCallback } from 'react';
 import { loginViewReducer, loginViewState } from '../reducers/loginView';
 import { LoginViewContext } from '../contexts/loginViewContext';
+import type { Register, Login } from '../utils/types';
 
 function useLoginViewReducer() {
     const [state, dispatch] = React.useReducer(loginViewReducer, loginViewState);
 
-    const showLogin = (registerFields?: Partial<typeof state.registerFields>) => {
-        dispatch({ type: 'SET_LOGIN_VIEW', payload: registerFields || {} });
-    }
+    const showLogin = useCallback(() => {
+        dispatch({ type: 'SET_LOGIN_VIEW', payload: state.registerFields });
+    }, [state.registerFields]);
 
-    const showRegister = (loginFields?: Partial<typeof state.loginFields>) => {
-        dispatch({ type: 'SET_REGISTER_VIEW', payload: loginFields || {} });
-    }
+    const setLoginFields = useCallback((loginFields: Login) => {
+        dispatch({ type: 'SET_LOGIN_FIELDS', payload: loginFields });
+    }, []);
 
-    const clearFields = () => {
+    const showRegister = useCallback(() => {
+        dispatch({ type: 'SET_REGISTER_VIEW', payload: state.loginFields });
+    }, [state.loginFields]);
+
+    const setRegisterFields = useCallback((registerFields: Register) => {
+        dispatch({ type: 'SET_REGISTER_FIELDS', payload: registerFields });
+    }, []);
+
+    const clearFields = useCallback(() => {
         dispatch({ type: 'RESET_FIELDS' });
-    }
+    }, []);
 
-    return { state, showLogin, showRegister, clearFields };
+    return { state, showLogin, setLoginFields, showRegister, setRegisterFields, clearFields };
 }
 
 export function LoginViewProvider({ children }: { children: React.ReactNode }) {
-    const { state, showLogin, showRegister, clearFields } = useLoginViewReducer();
+    const { state, showLogin, showRegister, setLoginFields, setRegisterFields, clearFields } = useLoginViewReducer();
 
     return (
-        <LoginViewContext.Provider value={{ LOGIN_VIEW_STATE: state, showLogin, showRegister, clearFields }}>
+        <LoginViewContext.Provider value={{ LOGIN_VIEW_STATE: state, showLogin, setLoginFields, showRegister, setRegisterFields, clearFields }}>
             {children}
         </LoginViewContext.Provider>
     );

src/reducers/loginView.ts

@@ -34,7 +34,9 @@ export function updateLocalStorageLoginView(state: LoginViewState) {
 
 export const STATE_ACTION_TYPES = {
     SET_LOGIN_VIEW: 'SET_LOGIN_VIEW',
+    SET_LOGIN_FIELDS: 'SET_LOGIN_FIELDS',
     SET_REGISTER_VIEW: 'SET_REGISTER_VIEW',
+    SET_REGISTER_FIELDS: 'SET_REGISTER_FIELDS',
     RESET_FIELDS: 'RESET_FIELDS',
 };
 
@@ -54,6 +56,13 @@ export function loginViewReducer(
         };
     }
 
+    if (action.type === 'SET_LOGIN_FIELDS') {
+        const { payload } = action;
+        newState = { 
+            ...state, 
+            loginFields: { ...state.loginFields, ...payload } 
+        };
+    }
     if (action.type === 'SET_REGISTER_VIEW') {
         const { payload } = action;
         newState = { 
@@ -63,6 +72,14 @@ export function loginViewReducer(
         };
     }
 
+    if (action.type === 'SET_REGISTER_FIELDS') {
+        const { payload } = action;
+        newState = { 
+            ...state, 
+            registerFields: { ...state.registerFields, ...payload } 
+        };
+    }
+
     if (action.type === 'RESET_FIELDS') {
         newState = {
             ...state,

src/utils/types.ts

@@ -1,25 +1,33 @@
 export type ViewType = 'login' | 'register';
 
+export type Register = {
+    full_name: string;
+    username: string;
+    email: string;
+};
+
+export type Login = {
+    identifier: string;
+};
+
 export type LoginViewState = {
     view: ViewType;
-    loginFields: {
-        identifier: string;
-    };
-    registerFields: {
-        full_name: string;
-        username: string;
-        email: string;
-    };
+    loginFields: Login;
+    registerFields: Register;
 };
 
 export type LoginViewContextType = {
     LOGIN_VIEW_STATE: LoginViewState;
     showLogin: () => void;
+    setLoginFields: (loginFields: Login) => void;
     showRegister: () => void;
+    setRegisterFields: (registerFields: Register) => void;
     clearFields: () => void;
 };
 
 export type Action = 
-    | { type: 'SET_LOGIN_VIEW'; payload: Partial<LoginViewState['registerFields']> }
-    | { type: 'SET_REGISTER_VIEW'; payload: Partial<LoginViewState['loginFields']> }
+    | { type: 'SET_LOGIN_VIEW'; payload: Register }
+    | { type: 'SET_LOGIN_FIELDS'; payload: Login }
+    | { type: 'SET_REGISTER_VIEW'; payload: Login }
+    | { type: 'SET_REGISTER_FIELDS'; payload: Register }
     | { type: 'RESET_FIELDS' };