No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Notificando cambios con StorageEventListener

14/19
Recursos

Aportes 19

Preguntas 4

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

馃 Pero 驴profe Juan, por qu茅 haces como que no ves la advertencia de missing dependencias en la consola?
.
馃寛 Los efectos son un tema espectacularmente divertid铆simo dentro de React. Una de sus particularidades consideradas entre las m谩s avanzados son las actualizaciones al estado dentro de los efectos y c贸mo estas afectan a los renders de nuestros componentes.
.
Si quieres que estudiemos este tema con la profundidad que merece, responde este comentario con un enorme 馃挌 y pondremos todo nuestro esfuerzo en grabar un Curso de React.js: Optimizaci贸n de Render y Debugging.

Una herramienta excelente para ver de forma visual en nuestras aplicaciones cada que nuestros componentes se renderizan, es la extensi贸n para los navegadores basados en chrome, React DeveloperTools

La cual se integra con el chrome developer tools del navegador, y activando la opcion Highlight updates when components render. dentro de la pesta帽a de Profiler, activaremos la delineaci贸n de aquellos componentes que cambian de estado.

Hace unas cuantas lecciones preguntaba qu茅 se pod铆a hacer para evitar esa recarga, que ya hab铆a evidencia con Console.log. Ahora ya s茅 por qu茅! Jajajaja 馃ぃ
Estoy feliz porque ya puedo dormir, no me sacaba la idea de la cabeza de que algo andaba mal con mi aplicaci贸n 馃榿

Y recuerden amigos, si quieren usar TypeScript para completar este curso, deben de usar la extension correcta en sus archivos. Tuve un error raro que no entendia y demore una hora en encontrarlo. Al final era que el archivo debia ser .tsx en lugar de .ts.

ChangeAlert/withStorageListener.js

import React from "react";

function withStorageListener(WrappedComponent) {
    return function WrappedComponentWithStorageListener(props) {
        const [storageListener, setStorageListener] = React.useState(false);
        return (
            <WrappedComponent
                show={storageListener}
                toggleShow={setStorageListener}
            />
        );
    }
}
export { withStorageListener };

ChangeAlert/index.js

import React from "react";
import { withStorageListener } from "./withStorageListener";

function ChangeAlert({show,toggleShow}) {
  if (show) {
    return <p>Hay Cambios!!!</p>;
  }else{

    return <p> No Hay Cambios!!!</p>;
  }

}
const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);
export { ChangeAlertWithStorageListener };

jaja no entend铆 nada, este curso est谩 dificil 馃槮

ChangeAlert/withStorageListener.js

import React, { useState } from 'react'

export const withStorageListener = (WrappedComponent) => {
    return function WrapedComponentWithStorageListener() {
        const [storageChange, setStorageChange] = useState(false)
        return (
                <WrappedComponent 
                    show={storageChange}
                    toggleShow={setStorageChange}
                />               
        )
    }
}

ChangeAlert/index.js

import React from 'react鈥
import { withStorageListener } from 鈥./withStorageListener鈥

const ChangeAlert = ({show, toggleShow}) => show && <p>hubo cambios!</p> || null

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert)

export {ChangeAlertWithStorageListener};
ChangeAlert/index.js

Esta clase estuvo fuerte xd

Yo quiero ese curso de optimizaci贸n de apps en React Uwu

Por el momento va de esta forma, el retorno lo deje con fragment vac铆o, igual podr铆a ser null o con alg煤n mensaje. ya que se debe si o si retornar algo para evitar que se rompa.
ChangeAlert/index.js

import React from 'react';
import { WithStorageListener } from './withStorageListener';

const ChangeAlert=({show,toggleShow})=>{
    if(show){return <p>Hubo cambios</p>}
    else{return <></>}
}

const ChangeAlertWithStorageListener = WithStorageListener(ChangeAlert)
export {ChangeAlertWithStorageListener}

ChangeAlert/WithStorageListener.js

import React from 'react';

const WithStorageListener=(WrappedComponent)=>
{
return function WrappComponentWithStorageListener(props){
 const [storageChange,setStorageChange]= React.useState(false)
    return (
    <WrappedComponent
    show={storageChange}
    toggleShow={setStorageChange}
    />
    )
}
}

export {WithStorageListener}

Codigo de
ChangeAlert/withStorageListener.js
me tome la libertad de agregar un else, o si no el codigo colapsa, haz al prueba.

import React from "react";
import { withStorageListener } from "./withStorageListener";

function ChangeAlert({ show, toggleShow }) {
    if(show){
        return <p>Habra cambios</p>;
    } else{
        return null;
    }
}

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);

export { ChangeAlertWithStorageListener }

ChangeAlert/index.js

import React from "react";
import { withStorageListener } from "./withStorageListener";

function ChangeAlert({ show, toggleShow }) {
    if(show){
        return <p>Habra cambios</p>;
    } else{
        return null;
    }
}

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);

export { ChangeAlertWithStorageListener }

premio al profesor mas complicado de todos, nombres hiperlargos鈥 borra copia borra copia鈥 es uno de los peores profesores que solo me hace pperder mucho el tiempo!

Hola comunidad platzi, les dejo el codigo de la clase en TypeScript (lo cual estuvo bastante retador):

import { FC, useState } from "react"

function withStorageListener<T>(
    WrappedComponent: FC<T>
) {
    return function WrappedComponentWithStorageListener(props:Omit<T, "show" | "toggleShow">){
        
        const [storageChange, setStorageChange] = useState(false);

        return (
            <WrappedComponent 
                {...(props as T)}
                show={storageChange}
                toggleShow={setStorageChange}          
            />
        )
    }   
}

export { withStorageListener }
import { Dispatch, SetStateAction, FC } from 'react'
import { withStorageListener } from "./withStorageListener"

interface Props {
    show: boolean,
    toggleShow: Dispatch<SetStateAction<boolean>>,
}

const ChangeAlert:FC<Props> = ({
    show,
})=> {
    if(show){
        return(
            <p>驴Hubo cambios?</p>
        )
    } else {
        return null
    }
}

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);

export { ChangeAlertWithStorageListener }
import { FC } from 'react'

import { TodoButton } from "../TodoButton"
import { TodoCounter } from "../TodoCounter"
import { TodoItem } from "../TodoItem"
import { TodoList } from "../TodoList"
import { TodoSearch } from "../TodoSearch"
import { TodosError } from "../TodoError"
import { EmptyTodos } from "../EmptyTodo"
import { TodosLoading } from "../TodoLoading"
import { Modal } from "../Modal"
import { TodoForm } from "../TodoForm"
import { TodoHeader } from "../TodoHeader"
import { useTodos } from './useTodos'
import { ChangeAlertWithStorageListener } from '../ChangeAlert'

const App: FC = () => {

  const {
    loading,
    error,
    searchedTodos,
    addTodo,
    completeTodo,
    deleteTodo,
    openModal,
    setOpenModal,
    completedTodos,
    totalTodos,
    searchValue,
    setSearchValue,
  } = useTodos();

  return (
    <>
      <TodoHeader
        loading={loading}
      >
        <TodoCounter
          completedTodos={completedTodos}
          totalTodos={totalTodos}
          // loading={loading}
        />
        <TodoSearch
          searchValue={searchValue}
          setSearchValue={setSearchValue}
          // loading={loading}
        />
      </TodoHeader>
      <TodoList
        loading={loading}
        error={error}
        onLoading={()=>(
          <>
            <TodosLoading />
            <TodosLoading />
            <TodosLoading />
          </>
        )}
        onError={()=>(
          <TodosError />
        )}
        onEmpty={()=><EmptyTodos />}
        searchedTodos={searchedTodos}
        searchText={searchValue}
        totalTodos={totalTodos}
        onEmptySearchResults={
          (searchText)=>(<p>No hay resultado para {searchText}</p>)
        }
        // render={(todo) => (
        //   <TodoItem
        //     key={todo.text}
        //     text={todo.text}
        //     completed={todo.completed}
        //     onComplete={() => { completeTodo(todo.text) }}
        //     onDelete={() => { deleteTodo(todo.text) }}
        //   />
        // )}
      >
        {
          (todo) => (
            <TodoItem
              key={todo.text}
              text={todo.text}
              completed={todo.completed}
              onComplete={() => { completeTodo(todo.text) }}
              onDelete={() => { deleteTodo(todo.text) }}
            />
          )
        }
      </TodoList>
      <TodoButton setOpenModal={setOpenModal} />

      {
        openModal && (
          <Modal>
            <TodoForm
              addTodo={addTodo}
              setOpenModal={setOpenModal}
            />
          </Modal>
        )
      }

      <ChangeAlertWithStorageListener />
    </>
  )
}



export default App

Las variables en ingles hacen mas dif铆cil este clase

Tenia esta duda hace un tiempo, de que pasaria si se hacen cambios al mismo storage por ejemplo.
Con este curso estoy sacando algunas dudas que tenia, como cuando pensaba una solucion mas sencilla o alternativa a context como vimos composicion de componentes y colocacion de estado.

Notificando cambios con StorageEventListener

.
Si ejecutamos la aplicaci贸n en 2 ventanas nos daremos cuenta que al modificar un TODO; es decir eliminarlo, crearlo o marcarlo como completado, los cambios no se sincronizan y en una ventana van a aparecer despu茅s afectando a la consistencia de la aplicaci贸n.
.
Lo que se hace es crear un componente para ChangeAlert en su correspondiente carpeta.
.

// ChangeAlert/index.js

import React from 'react';
import { withStorageListener } from './withStorageListener';

function ChangeAlert({ show, toggleShow }) {
  if (show) {
    return <p>Hubo cambios</p>;
  }
}

const ChangeAlertWithStorageListener = withStorageListener(ChangeAlert);

export { ChangeAlertWithStorageListener };
// ChangeAlert/withStorageListener.js
import React from 'react';

function withStorageListener(WrappedComponent) {
  return function WrappedComponentWithStorageListener(props) {
    const [storageChange, setStorageChange] = React.useState(false);
    
    return (
      <WrappedComponent
        show={storageChange}
        toggleShow={setStorageChange}
      />
    );
  }
}

.
Este componente como podemos observar tiene a las propiedades show y toogleShow que se recibir谩n despu茅s de enviar el componente como par谩metro HOC withStorageListener.
.
El HOC lo que hace es recibir un WrappedComponent luego renderiza un componente WrappedComponentWithStorageListener que internamente tiene un estado para saber si hubo cambios en el localStorage storageChange (inicialmente en false) y su correspondiente modificador setStorageChange, se retorna entonces un WrappedComponent con el estado inyectado en dicho componente.
.
Llamando al HOC de esa manera lo guardamos en la constante ChangeAlertWithStorageListener y es a este a qui茅n exportamos para que la aplicaci贸n lo pueda renderizar.
.

function App() {
	...
	return (
    <React.Fragment>
			...
			<ChangeAlertWithStorageListener />
    </React.Fragment>
  );
}

export default App;

seria interesante el curso de optimizaci贸n con react,.

Potente la clase profe 馃樀