Migración de UseState a UseReducer en React

Clase 17 de 19 • Curso de React.js: Manejo Profesional del Estado

Contenido del curso

Introducción

1
Manejo Avanzado del Estado en React.js
03:32 min

Estado y ciclo de vida con React.Component

Estados independientes y compuestos

Código imperativo y declarativo en React

Manejo del estado en TODO Machine

Próximos pasos

19
Manejo Profesional del Estado en React con Hooks y Reducers
02:04 min

Tomar examen

Resumen

¿Cómo migrar de UseState a UseReducer para CustomHooks en React?

La migración de UseState a UseReducer puede parecer desafiante, pero es esencial para mejorar la gestión de estados en aplicaciones complejas. En este ejemplo práctico, te mostramos cómo aplicar este cambio en un CustomHook en React, aprovechando al máximo tus habilidades en desarrollo. ¡Empecemos!

¿Qué es un CustomHook y por qué es importante mantener su estructura?

Un CustomHook es una función en React que permite reutilizar lógica de estado y efectos entre varios componentes. En este caso específico, estamos trabajando con UseLocalStorage, que gestiona la lógica del almacenamiento local y se utiliza en otros hooks o componentes como UseToDo.

Mantener la estructura del CustomHook es crucial. Imagina que muchas personas dependen de dicho hook en su proyecto. Cualquier cambio que rompa la funcionalidad podría afectar significativamente a quienes lo utilizan, haciendo esencial asegurarse de que los parámetros de entrada y salida permanezcan inalterados.

¿Cómo se define el initial state y el reducer en UseReducer?

Para comenzar, necesitamos definir un initial state que refleje el estado inicial de nuestra aplicación componente. En el caso de UseLocalStorage, esto podría incluir valores como SynchronizeItem o Loading, establecidos según los valores iniciales de nuestra lógica.

const initialState = {
  synchronizeItem: true,
  error: false,
  loading: true,
  item: initialValue // este valor se deriva del parámetro de entrada
};

El siguiente paso es crear un reducer sólido. Este reducer debe manejar múltiples tipos de acción que reflejan el ciclo de vida de nuestra lógica, facilitando la transición entre diferentes estados. Al definir estos types, nos aseguramos de que nuestro código sea escalable y legible.

const reducer = (state, action) => {
  switch (action.type) {
    case 'ERROR':
      return {...state, error: true};
    case 'SUCCESS':
      return {...state, loading: false, item: action.payload};
    case 'SAVE':
      return {...state, item: action.payload};
    default:
      return state;
  }
};

¿Cómo se implementan los ActionCreators y ActionTypes?

Implementar ActionCreators y ActionTypes es clave para una migración efectiva. Los ActionCreators encapsulan la lógica para la creación de acciones, lo que simplifica la gestión de las mismas a lo largo de tu aplicación.

const onSynchronize = () => ({type: actionTypes.SYNCHRONIZE});
const onSave = (item) => ({type: actionTypes.SAVE, payload: item});

Con estos ActionCreators, la lógica de las acciones está centralizada, lo que facilita el mantenimiento y el escalado del código. Además, garantiza que las acciones sean coherentes y se gestionen de manera uniforme.

¿Por qué es importante seguir un flujo de desarrollo sistemático?

Durante un proceso de migración, es probable que aparezcan errores o inconvenientes. A lo largo del código, es prioritario verificar cada parte del flujo, asegurando que los datos se transmitan correctamente entre estados. Un error común es olvidar actualizar un ActionType o ActionCreator, lo que puede resultar en que el flujo se detenga inesperadamente.

Mantener buenas prácticas como comentar partes críticas del código, probar cada interacción y validar resultados, son tácticas que nos ayudan a identificar rápidamente los puntos débiles y a resolver problemas antes de que escalen.

¡No te desanimes si encuentras algún error! La práctica constante y el análisis de resultados mejorarán tu habilidad para migrar y gestionar estados en React, llevándote a un nivel más profesional.

¡Sigue creciendo y aprendiendo! Cada paso te acerca más a ser un experto en React.

Max Andy Diaz Neyra

student•

Código de la clase por si te pierdes o te da pereza:

import React from "react";

function useLocalStorage(itemName, initialValue) {
    const [state, dispatch] = React.useReducer(reducer, initialState({ initialValue }))

    const {
        sincronizedItem,
        loading,
        error,
        item,
    } = state;

    // Action creators
    const onError = (error)=>dispatch({ type: actionTypes.error, payload: error});
    const onSuccess = (parsedItem)=>dispatch({ type: actionTypes.success, payload: parsedItem});
    const onSave = (newItem)=>dispatch({ type: actionTypes.save, payload: newItem});
    const onSincronize = ()=>dispatch({ type: actionTypes.sincronize });

    React.useEffect(()=>{
        setTimeout( ()=>{
        try {
            const localStorageItem = localStorage.getItem(itemName);
            let parsedItem;

            if(!localStorageItem) {
            localStorage.setItem(itemName,JSON.stringify(initialValue));
            parsedItem = initialValue;
            } else {
            parsedItem = JSON.parse(localStorageItem);
            }
            onSuccess(parsedItem);
        } catch (error) {
            onError(error);
        }
        },3000);
    },[sincronizedItem])

    const saveItem = (newItem) =>{
        try {
            const stringifiedItem = JSON.stringify(newItem);
            localStorage.setItem(itemName,stringifiedItem);
            onSave(newItem);
        } catch (error) {
            onError(error);
        }
    }

    const sincronizeItem = () =>{
        onSincronize();
    }

    return {
        item, 
        saveItem, 
        loading,
        error,
        sincronizeItem,
    };
}

const initialState = ({ initialValue })=>({
    sincronizedItem: true,
    loading: true,
    error: false,
    item :initialValue,
});

const actionTypes = {
    error: 'ERROR',
    success: 'SUCCESS',
    save: 'SAVE',
    sincronize: 'SINCRONIZE',
}

const reducerObject = (state, payload) =>({
    [actionTypes.error]: {
        ...state,
        error: true,
    },
    [actionTypes.success]:{
        ...state,
        error:false,
        sincronizedItem: true,
        loading: false,
        item: payload,
    },
    [actionTypes.save]:{
        ...state,
        item:payload
    },
    [actionTypes.sincronize]:{
        ...state,
        sincronizedItem: false,
        loading: true,
    },
});

const reducer = (state, action) =>{
    return reducerObject(state, action.payload)[action.type] || state;
}

export { useLocalStorage }

Cesar González Caballero

student•

Gracias!!

Luis Abdel Rangel Castro

student•

import React from "react";

function useLocalStorage(itemName, initialValue) {
  const [state, dispatch] = React.useReducer(
    reducer,
    initialState({ initialValue })
  );

  const { sincronizedItem, error, loading, item } = state;

  // actions creators

  const onError = (error) => {
    dispatch({ type: actionTypes.error, payload: error });
  };

  const onSuccess = (parsedItem) => {
    dispatch({ type: actionTypes.success, payload: parsedItem });
  };

  const onSave = (newItem) => {
    dispatch({ type: actionTypes.save, payload: newItem });
  };

  const onSincronize = () => {
    dispatch({ type: actionTypes.sincronize });
  };

  React.useEffect(() => {
    setTimeout(() => {
      try {
        const localStorageItem = localStorage.getItem(itemName);
        let parsedItem;

        if (!localStorageItem) {
          localStorage.setItem(itemName, JSON.stringify(initialValue));
          parsedItem = initialValue;
        } else {
          parsedItem = JSON.parse(localStorageItem);
        }

        onSuccess(parsedItem);
      } catch (error) {
        onError(error);
      }
    }, 3000);
  }, [sincronizedItem]);

  const saveItem = (newItem) => {
    try {
      const stringifiedItem = JSON.stringify(newItem);
      localStorage.setItem(itemName, stringifiedItem);
      onSave(newItem);
    } catch (error) {
      onError(error);
    }
  };

  const sincronizeItem = () => {
    onSincronize();
  };

  return {
    item,
    saveItem,
    loading,
    error,
    sincronizeItem,
  };
}

const initialState = ({ initialValue }) => ({
  sincronizedItem: true,
  error: false,
  loading: true,
  item: initialValue,
});

const actionTypes = {
  error: "ERROR",
  success: "SUCCESS",
  save: "SAVE",
  sincronize: "SINCRONIZE",
};

const reducerObject = (state, payload) => ({
  [actionTypes.error]: {
    ...state,
    error: true,
  },
  [actionTypes.success]: {
    ...state,
    error: false,
    loading: false,
    sincronizedItem: true,
    item: payload,
  },
  [actionTypes.save]: {
    ...state,
    item: payload,
  },
  [actionTypes.sincronize]: {
    ...state,
    loading: true,
    sincronizedItem: false,
  },
});

const reducer = (state, action) =>
  reducerObject(state, action.payload)[action.type] || state;

export { useLocalStorage };

Haziel Josue Castillo Vázquez

Angelo Raso

Cristian Blandon

Julian David Toro Medina

Huáscar Suárez Chávez

Irving Juárez

Juan Castro

teacher•

Lautaro Agustin Barrera

SERGIO SAUL ROJAS VELASQUEZ

Jose Ever Muñoz Muñoz

Xavier Medina Veintimilla

Kevin Ramirez

Luis Alejandro Vera Hernandez

Daniel Alejandro Castellanos Aroca

Gustavo A. González G.

Leinerke Ilich Suarez Alcala

Danny Birouti

Andrés D Amelio

Brenda Sutara

Williams Munguía

Daniel Arturo Sánchez Godoy

Luis Paredes

César Pedetta

Christian Rivera

Marco Palacios Orihuela

Brayan Jeshua

Reinaldo Mendoza

reynaldo gutierrez

Migración de UseState a UseReducer en React

Introducción

Manejo Avanzado del Estado en React.js

Estado y ciclo de vida con React.Component

Creación de Proyectos React y Manejo de Estado con Hooks y Clases

Diferencias entre Componentes de Clase y Función en React

Efectos y ciclo de vida en componentes React con useEffect

Métodos del ciclo de vida en componentes de clase React

Estados independientes y compuestos

Diferencias entre estados simples y compuestos en React

Actualización de estados en interfaces de usuario con React

Estados Compuestos en Componentes de Clase con React

Estados Compuestos con React.UseState: Manejo y Actualización Eficiente

Código imperativo y declarativo en React

Programación Imperativa vs Declarativa: Implementación en React

Programación Declarativa: Simplificación y Abstracción de Estados

Uso de UseReducer para manejar el estado en React

Creación de Reducers: If, Switch y Reducer Objects en React

Manejo de estados con useReducer en React

Manejo de Action Types y Action Creators en React Reducers

Manejo del estado en TODO Machine

Manejo de Estados Derivados en React con useState

Migración de UseState a UseReducer en React

Optimización de Custom Hooks en React sin UseReducer

Próximos pasos

Manejo Profesional del Estado en React con Hooks y Reducers