Migración de useState a useReducer en useLocalStorage

Me parece gracioso que el profesor sepa muchas cosas pero no se acuerde de como se llaman los símbolos () {} [] jaja pero es todo un crack el profe, mis respetos!

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 }

👍 Like si te diste cuenta que faltaba el SAVE, y pensaste en cómo le digo a JuanDC que faltaba el SAVE!!! 😬

Sincronized (pasado)

Sincronize (verbo)

Sincronizada (mi desayuno)

sync

Me acabo de dar cuenta que “sincronize” se escribe “sycronize”. El IDE me mostró la correción del diccionario Jeje ¡Igual el profesor es un crack!

synced / syncing