React useReducer

useReducer es una función de React Hooks que te permite manejar el estado de tu aplicación de manera similar a como lo harías con un reducer en una aplicación Redux. A diferencia de useState, que sólo te permite guardar y actualizar un único valor de estado, useReducer te permite manejar estado complejo y encapsular la lógica relacionada con ese estado en un solo lugar.

useReducer toma dos argumentos: el primer argumento es una función reducer y el segundo argumento es el estado inicial. La función reducer toma el estado actual y una acción, y devuelve el nuevo estado. El estado inicial es el valor inicial que se usará cuando se monta el componente.

Aquí hay un ejemplo de un componente de React que utiliza useReducer para manejar el estado de un contador:

import { useReducer } from 'react';

function reducer(state, action) {
  switch (action.type) {
    case 'increment':
      return { count: state.count + 1 };
    case 'decrement':
      return { count: state.count - 1 };
    default:
      throw new Error();
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, { count: 0 });

  return (
    <>
      <h1>{state.count}</h1>
      <button onClick={() => dispatch({ type: 'increment' })}>+</button>
      <button onClick={() => dispatch({ type: 'decrement' })}>-</button>
    </>
  );
}

En este ejemplo, el componente Counter utiliza la función useReducer para inicializar el estado con un objeto { count: 0 }. Luego, el componente utiliza unos botones para incrementar o decrementar el contador. Cada vez que el usuario hace clic en un botón, el componente llama a dispatch con una acción específica, que es manejada por el reducer para actualizar el estado. El estado actualizado es entonces pasado al componente para renderizar.

Al igual que useState, useReducer devuelve un par de valores, el estado actual y una función dispatch para actualizarlo. Al tener toda la lógica relacionada con el estado en un solo lugar, es más fácil entender cómo se actualiza el estado y resolver cualquier problema relacionado con eso.

useReducer es útil en aplicaciones de React de mayor tamaño y complejidad, ya que te permite manejar estado complejo y encapsular la lógica relacionada con este.

https://www.w3schools.com/react/react_usereducer.asp
https://beta.reactjs.org/reference/react/useReducer
https://ewebik.com/react-js/usereducer
https://developero.medium.com/react-hooks-usereducer-4d7b68ce22e2
https://devtrium.com/posts/how-to-use-react-usereducer-hook

React useref

useRef es una función de React Hooks que te permite crear una referencia a un elemento del DOM en un componente de React. Una referencia es simplemente una forma de guardar una referencia al elemento del DOM en una variable, para que puedas acceder y manipularlo más tarde.

Por ejemplo, puedes usar useRef para guardar una referencia a un elemento de entrada de texto y luego utilizar esa referencia para limpiar el valor de ese campo después de que el usuario haya enviado un formulario:

import { useRef } from 'react';

function Form() {
  const inputRef = useRef(null);

  function handleSubmit(event) {
    event.preventDefault();
    inputRef.current.value = '';
  }

  return (
    <form onSubmit={handleSubmit}>
      <input ref={inputRef} type="text" />
      <button type="submit">Submit</button>
    </form>
  );
}

En este ejemplo, se crea una referencia a inputRef utilizando useRef y se le pasa null como valor inicial. Luego se asigna esta referencia al elemento de entrada <input> mediante la propiedad ref. Al enviar el formulario, el evento onSubmit activa una función manejadora en la que se accede al valor actual de inputRef.current y se limpia.

useRef también es útil si necesitas guardar una referencia a un objeto o una función en un componente de React, en lugar de un elemento del DOM. Por ejemplo, puedes guardar una referencia a una instancia de una clase o a un objeto de configuración, y luego acceder a él desde diferentes lugares en tu componente.

https://latteandcode.medium.com/react-el-hook-useref-6e20f026d5b
https://keepcoding.io/blog/para-que-sirven-las-refs-en-react/
https://keepcoding.io/blog/useref-en-react/
https://beta.reactjs.org/reference/react/useRef

Ejercicio CRUD

Vamos a crear un mantenimiento de una BD de alumnos:

{
  "alumno": [
    {
      "id": 1,
      "nombre": "Ana Pi",
      "email": "ana@pi.com",
      "nota": 8
    },
    {
      "id": 2,
      "nombre": "Eva Buj",
      "email": "eva@buj.com",
      "nota": 7
    },
    {
      "id": 3,
      "nombre": "Juan Ra",
      "email": "juan@ra.com",
      "nota": 4
    }
  ]
}

La haremos como hemos estado haciendo los CRUD de C# de MVC, una lista de alumnos con botones de editar y borrar y un botón de añadir nuevo.

Juego piedra papel tijera

Vamos a crear un componente react que nos muestre tres botones [piedra],[papel], [tijera]. Cuando se pulse el ordenador escogerá al azar y nos dirá si se ha ganado perdido o emparado y se guardará:
– En un array todas las jugadas hasta el momento
– Veces que se han ganado.
– resultado última jugada.