¿Cómo manejar el estado de la aplicación sin Redux?

En este artículo, aprenderemos sobre el manejo del estado sin Redux. Hay varias formas de administrar el estado sin redux en cualquier aplicación web. En este artículo, aprenderemos la gestión del estado mediante el gancho useState() . Es un gancho de reacción que devuelve dos valores, el estado y una función mediante la cual podemos mutar el estado y podemos inicializar el estado como argumentos, en el código a continuación es una array vacía. El componente se vuelve a renderizar cada vez que cambia el estado. Entendamos esto con un ejemplo. En esta aplicación web, mantendremos el estado (que es la array de tareas) en el componente de la aplicación , pasaremos la array de tareas al componente de tareas para que se muestre en un formato adecuado y haremos la mutación de estado en las tareas .componente con la ayuda de la función proporcionada por el gancho useState().

Sintaxis:

const [state,setState] = useState([]);

Creación de la aplicación React e instalación del módulo: 

Paso 1: Cree una aplicación React usando el siguiente comando.

npx create-react-app foldername

Paso 2: después de crear la carpeta de su proyecto, es decir, el nombre de la carpeta, acceda a ella con el siguiente comando:

cd foldername

Paso 3: Ejecute el servidor de desarrollo utilizando el siguiente comando:

npm start

Estructura del proyecto: Tendrá el siguiente aspecto.

Implementación: agregue el siguiente código en los archivos respectivos.

App.js: en este componente, creamos un estado con la ayuda de useState() y establecimos su valor inicial en una array de un solo elemento. También hemos pasado accesorios al componente Tareas con sus respectivos nombres.

import { useState } from "react";
import "./App.css";
import Tasks from "./Component/Tasks";
  
function App() {
  const [taskList, setTaskList] = useState([
    {
      title: "Submit DS assignment",
      deadline: "1pm 10 March",
    },
  ]);
  
  return (
    <div className="App">
      <Tasks taskList={taskList} 
          setTaskList={setTaskList} />
    </div>
  );
}
  
export default App;

Tasks.js: en este componente, agregamos algunos estilos básicos y conectamos handleClick() y handleChange() al botón y a los campos de entrada. Hemos utilizado el método para actualizar dinámicamente la propiedad del objeto a través de la sintaxis que se proporciona a continuación. Esto nos permite reducir la redundancia de crear diferentes funciones handleChange para diferentes campos de entrada. Además, tenga en cuenta que para usar este método, el campo de entrada debe tener una propiedad de nombre . La función handleClick() es responsable de mutar el estado y agregar la tarea actual al estado de la aplicación. Hemos mantenido un estado de componente que es CurrentTask , nos ayudará a realizar un seguimiento de la tarea que el usuario desea agregar a la lista.

[e.target.name] : e.target.value

import React, { useState } from "react";
import Task from "./Task";
  
const Tasks = ({ setTaskList, taskList }) => {
  const inputStyles = {
    border: "none",
    borderBottom: "2px solid #9FE6A0",
    outline: "none",
    margin: "10px",
  };
  
  const [CurrentTask, setCurrentTask] = useState({});
  
  let taskListDisplay = taskList.map((task, index) => {
    return (
      <Task
        key={index}
        index={index}
        deadline={task.deadline}
        title={task.title}
      />
    );
  });
  
  const handleClick = (e) => {
    setTaskList([...taskList, CurrentTask]);
  };
  
  const handleChange = (e) => {
    e.preventDefault();
    setCurrentTask({
      ...CurrentTask,
      [e.target.name]: e.target.value,
    });
  };
  
  return (
    <div>
      <h4>Task-Web-App :</h4>
      <div>
        <input
          style={inputStyles}
          placeholder="Title"
          type="text"
          value={CurrentTask.title !== undefined 
              ? CurrentTask.title : ""}
          name="title"
          onChange={handleChange}
        />
        <input
          style={inputStyles}
          placeholder="Deadline"
          type="text"
          value={CurrentTask.deadline !== undefined
              ? CurrentTask.deadline : ""}
          name="deadline"
          onChange={handleChange}
        />
        <button
          style={{
            outline: "none",
            border: "none",
            backgroundColor: "#9FE6A0",
            borderRadius: "8px",
            padding: "7px",
            width: "90px",
          }}
          onClick={handleClick}
        >
          Add Task
        </button>
      </div>
      <div
        style={{
          display: "flex",
          alignItems: "center",
          flexDirection: "column",
        }}
      >
        {taskListDisplay}
      </div>
    </div>
  );
};
  
export default Tasks;

Task.js: este es solo un componente de presentación que muestra los detalles de la tarea al desestructurar los valores/propiedades.

import React from "react";
  
const Task = ({ deadline, title, index }) => {
  return (
    <div
      style={{
        border: "2px solid #F55C47",
        width: "30vw",
        margin: "10px",
        borderRadius: "10px",
        padding: "8px",
      }}
    >
      <h2 style={{ margin: "2px", color: "#564A4A" }}>
          Task {index + 1} 
      </h2>
  
        
<p>
        {" "}
        <strong style={{ color: "#564A4A" }}> Title :</strong>
        <span style={{ color: "#707070" }}> {title}</span>
      </p>
  
        
<p>
        <strong style={{ color: "#564A4A" }}>Deadline : </strong>
        <span style={{ color: "#707070" }}>{deadline}</span>
      </p>
  
    </div>
  );
};
  
export default Task;

Demostración de trabajo de la aplicación web:

Ejemplo 2: en este ejemplo, no mantendremos el estado en el componente de la aplicación, sino en algún otro componente secundario, será el componente de canciones . Crearemos dos estados, uno para almacenar el nombre del cantante y el segundo será la array de las 5 canciones más exitosas del cantante cuyo nombre ingresó el usuario. Y obtendremos datos de la API abierta de Rapid API, esto se hará con la ayuda de axios. La implementación se analiza a continuación.

Instale axios como una dependencia:

npm i axios

Nombre de archivo: App.js: dado que no mantenemos el estado de la aplicación en este componente, no necesitamos ningún estado en este archivo.

import { useState } from "react";
import "./App.css";
import Songs from "./Component/Songs";
import Tasks from "./Component/Tasks";
  
function App() {
  return (
    <div className="App">
      <Songs />
    </div>
  );
}
  
export default App;

Nombre de archivo: Songs.js: en este componente, hemos inicializado el nombre del cantante para que sea Justin de forma predeterminada, lo que significa que obtendrá datos para Justin en el renderizado inicial. Hemos creado una función fetchData que es responsable de obtener datos y actualizar el estado HitsSongs del componente Songs , esta función se llama inicialmente cuando la aplicación se carga para obtener las canciones exitosas de Justin con la ayuda del gancho useEffect. Tenga en cuenta que el objeto params es lo que contendrá el nombre del cantante mientras busca las canciones exitosas para el cantante. Podemos reutilizar esta función fetchData cuando el usuario hace clic en Buscarporque es una función independiente y hace uso de cualquier otro dato excepto para actualizar el estado de HitSongs . Y finalmente, hemos conectado los controladores onClick y onChange al botón y la entrada.

import React, { useState,useEffect } from "react";
import axios from "axios";
  
const Songs = () => {
  const [HitSongs, setHitSongs] = useState([]);
  const [SingerName, setSingerName] = useState("Justin");
  
  const inputStyles = {
    border: "none",
    borderBottom: "2px solid #9FE6A0",
    outline: "none",
    margin: "10px",
  };
  
  const fetchData = async () => {
    var options = {
      method: "GET",
      url: "https://genius.p.rapidapi.com/search",
      params: { q: `${SingerName}` },
      headers: {
        "x-rapidapi-host": "genius.p.rapidapi.com",
        "x-rapidapi-key": "ffc2438edbmsh0a88b634e6e77a7p123125jsnfb163d4d72f7",
      },
    };
    let data = await axios.request(options);
    data = data.data.response.hits.slice(0, 5);
    setHitSongs(data);
  };
  
  const handleClick = (e) => {
    fetchData();
  };
  
  const handleChange = (e) => {
    e.preventDefault();
    setSingerName(e.target.value);
  };
  
  useEffect(() => {
    fetchData();
  }, []);
  
  let displaySongs = HitSongs.map((song) => {
    return (
      <div key={song.result.id}>
        <div
          style={{
            border: "2px solid #9FE6A0",
            width: "30vw",
            padding: "5px",
            margin: "8px",
          }}
        >
          {song.result.full_title}
        </div>
      </div>
    );
  });
  return (
    <>
      <div>
        <h4>Top 5 Hit songs :</h4>
        <div>
          <input
            style={inputStyles}
            placeholder="Singer Name"
            type="text"
            value={SingerName !== "" ? SingerName : ""}
            onChange={handleChange}
          />
  
          <button
            style={{
              outline: "none",
              border: "none",
              backgroundColor: "#9FE6A0",
              borderRadius: "8px",
              padding: "7px",
              width: "90px",
            }}
            onClick={handleClick}
          >
            Search
          </button>
        </div>
        <div
          style={{
            display: "flex",
            alignItems: "center",
            flexDirection: "column",
          }}
        ></div>
      </div>
      <div>
        {displaySongs.length === 0 ? (
          <>
            <div> Fetching data ... Please wait 🙂 </div>
          </>
        ) : (
          <div
            style={{
              display: "flex",
              flexDirection: "column",
              alignItems: "center",
            }}
          >
            {displaySongs}
          </div>
        )}
      </div>
    </>
  );
};
  
export default Songs;

Demostración de trabajo de la aplicación web: