Gestión del estado en React usando la API de contexto y Hooks

Muy buenas, soy Miguel y en esta ocasión les traigo este nuevo tutorial.

La gestión del estado es el concepto más importante en React.

Hay varias formas de administrar el estado en React. La forma más común de administrar el estado es pasando accesorios por los componentes.

Pero esta forma de administrar el estado no es escalable si está construyendo una aplicación grande o mediana. Entonces, aquí vamos a discutir cómo puede administrar el estado globalmente usando la API de contexto con enlaces.

Aquí vamos a construir una aplicación todo usando API de contexto y ganchos. En realidad, no necesitamos administrar el estado globalmente para esta pequeña aplicación, pero quiero brindar una breve descripción general de la API de contexto para que pueda usarla en un proyecto más grande.

Nosotros usaremos Bootstrap para peinar y fuente Awesome para iconos. Así que asegúrese de importar los enlaces CDN en el archivo index.html en la carpeta pública.

La estructura del proyecto del proyecto final se parece a esto.

public
src
|- components
   |- TodoForm.js
   |- TodoList.js
|- contexts
   |- TodoContext.js
|- App.css
|- App.js
|- index.js

README.md
package.json

Primero creemos nuestro contexto,

TodoContext.js

import React, { createContext, useState } from "react";
import uuid from "uuid/v1";

export const TodoContext = createContext();

const TodoContextProvider = props => {
  const [todos, setTodos] = useState([]);

  const addTodo = todo => {
    setTodos([...todos, { todo, id: uuid() }]);
  };

  const removeTodo = id => {
    setTodos(todos.filter(todo => todo.id !== id));
  };
  
  return (
    <TodoContext.Provider value={{ todos, addTodo, removeTodo }}>
      {props.children}
    </TodoContext.Provider>
  );
};

export default TodoContextProvider;

TodoContext.js

Como puede ver, creamos nuestro contexto usando createContext que importamos desde "react".

export const TodoContext = createContext();

Necesitamos envolverlo debajo de un proveedor para que esté disponible para que lo usen otros componentes.

Básicamente estamos usando dos funciones, addTodo y removeTodo para agregar y eliminar todos los que usaremos en nuestros componentes Todo.

const addTodo = todo => {    
      setTodos([...todos, { todo, id: uuid() }]);  
};const removeTodo = id => {      
      setTodos(todos.filter(todo => todo.id !== id));  
};

Debe pasar estas funciones como valor dentro del proveedor así.

<TodoContext.Provider 
value={{ todos, addTodo, removeTodo }}
> 
{props.children} 
</TodoContext.Provider>

Entonces nuestro TodoContext está hecho, pero ¿cómo lo usará? No está conectado a ningún otro componente. ¿Cómo sabrán otros componentes que existe este archivo?

App.js

Debe importar este archivo en App.js y ajustarlo para que pueda pasar todos estos valores a otros componentes.

import React from "react";
import "./App.css";
import TodoForm from "./components/TodoForm";
import TodoContextProvider from "./contexts/TodoContext";
import TodoList from "./components/TodoList";

function App() {
  return (
    <div>
      <TodoContextProvider>
        <TodoForm />
        <TodoList />
      </TodoContextProvider>
    </div>
  );
}

export default App;

App.js

Como puede ver, TodoContextProvider está envolviendo los otros componentes. No te preocupes por TodoForm y TodoList, crearemos estos componentes ahora.

Todos los valores pasados ​​dentro de TodoContext.provider ahora están disponibles para usar dentro de TodoForm y el componente TodoList.

TodoForm.js

Creemos el formulario para ingresar los todos en el componente TodoForm.

import React, { useState, useContext, useEffect } from "react";
import "../App.css";
import { TodoContext } from "../contexts/TodoContext";

export default function TodoForm() {
  
  const { todos, addTodo } = useContext(TodoContext);
  
  const [todo, setTodo] = useState("");

  const handleSubmit = e => {
    e.preventDefault();
    addTodo(todo);
    setTodo("");
  };

  return (
    <div className="card card-body my-3 form">
      <h3 className="text-center text-info"> Todo List App in ReactJS</h3>
      <hr />
      <form onSubmit={handleSubmit}>
        <input
          type="text"
          className="form-control"
          placeholder="Add your Todo"
          value={todo}
          required
          onChange={e => setTodo(e.target.value)}
        />
        <button className="btn btn-success btn-block mt-3">Add Todo</button>
      </form>
    </div>
  );
}

TodoForm.js

UseContext es uno de los Hooks integrados, que brinda a los componentes funcionales un fácil acceso a su contexto. Estamos accediendo a la función addTodos a través de useContext.

const { todos, addTodo } = useContext(TodoContext);

Al enviar el botón, se llama a la función addTodo y todo se pasa como argumento.

const handleSubmit = e => { 
e.preventDefault(); 
addTodo(todo); 
setTodo(""); 
};

TodoList.js

Para el estilo, usamos principalmente clases de arranque y algunos CSS personalizados que están escritos en App.css.

import React, { useContext } from "react";
import "../App.css";
import { TodoContext } from "../contexts/TodoContext";

export default function TodoList() {
  const { todos, removeTodo } = useContext(TodoContext);

  return todos.length ? (
    <div className="card card-body my-3 form">
      <h3 className="text-center text-info"> {todos.length} Things to do</h3>
      <hr />
      <ul className="list-group list-group-flush">
        {todos.map(todo => {
          return (
            <div
              className="row shadow-sm p-1 mb-3 bg-white rounded"
              key={todo.id}
            >
              <div className="col-md-8">
                <li className="list-group-item">
                  <i className="fa fa-check-square-o"></i> {todo.todo}
                </li>
              </div>
              <div className="col-md-2 text-center">
                <i
                  className="fa fa-trash-o delete"
                  onClick={() => removeTodo(todo.id)}
                ></i>
              </div>
            </div>
          );
        })}
      </ul>
    </div>
  ) : (
    <div className="card card-body my-3 form">
      <h4 className="text-center text-info" style={{ fontFamily: "Solway" }}>
        Nothing left to do. Enjoy your day off !
      </h4>
    </div>
  );
}

TodoList.js

Este componente es responsable de listar todos en la interfaz de usuario, al igual que el componente TodoForm al que estamos accediendo todos y removeTodo utilizando useContext.

const { todos, removeTodo } = useContext(TodoContext);

Archivo App.css

En removeTodo, se pasa la identificación de la tarea que se utilizará para eliminar esa tarea en particular. Estamos mapeando todos los todos y luego mostrarlos en la UI (interfaz de usuario).

@import url("https://fonts.googleapis.com/css?family=Roboto+Slab|Solway&display=swap");

.form {
  width: 60%;
  margin: auto;
  font-family: "Roboto Slab", serif;
}

.delete {
  font-size: 20px;
  color: rgb(18, 198, 230);
  cursor: pointer;
  margin-top: 15px;
}

Archivo App.css para un estilo personalizado básico.

Así es como podemos gestionar el estado global utilizando useContext .Es una aplicación pequeña, pero puedes usar useContext para manejar el estado en cualquier gran aplicación.

Elimina la dependencia de Redux que es una biblioteca externa y fácil de usar y comprender que Redux.

Espero que encuentre útil este artículo. En caso afirmativo, anote sus valiosos comentarios a continuación.