¿Qué Es React Redux Y Cómo Lo Uso?

Administre fácilmente el estado React con Redux. ¿Preparado para comenzar? Así es cómo.

Redux es una biblioteca de administración de estado gratuita que funciona en la parte frontal de las aplicaciones de JavaScript, administrando el estado de cada componente desde su interfaz de usuario. La biblioteca Redux facilita la separación del código que administra y almacena datos en su aplicación del código que maneja eventos y cómo afecta los diversos componentes de la interfaz de usuario de su aplicación.

Una de las mejores cosas de Redux es su flexibilidad. Puede usar Redux con casi cualquier marco o biblioteca de JavaScript.

El equipo de Redux ha creado tres bibliotecas: Redux, React-Redux y Redux Toolkit. Las tres bibliotecas funcionan juntas para aprovechar al máximo su experiencia de desarrollo de React, y aprenderá a usarlas en este artículo de tutorial.

La importancia de React-Redux

Redux es una biblioteca de administración de estado independiente, pero requiere una biblioteca de enlaces de interfaz de usuario para usarse con un marco o una biblioteca front-end. La biblioteca de enlaces de interfaz de usuario administra la lógica de interacción del contenedor de estado (o tienda), que es un conjunto predefinido de pasos que conectan el marco frontal con la biblioteca Redux.

React-Redux es la biblioteca oficial de enlaces de UI de Redux para aplicaciones React y es mantenida por el equipo de Redux.

RELACIONADO: Cómo crear su primera aplicación React con JavaScript

Instala Redux en el directorio de tu proyecto

Hay dos formas de acceder a las bibliotecas Redux en su aplicación React. El enfoque recomendado por el equipo de Redux es usar el siguiente comando al crear un nuevo proyecto React:

npx create-react-app my-app --template redux 

El comando anterior configurará automáticamente el repositorio de Redux Toolkit, React-Redux y Redux. Sin embargo, si desea usar Redux en su proyecto React existente, simplemente instale la biblioteca Redux como una dependencia usando el siguiente comando:

npm install redux 

Aquí está la biblioteca de interfaz de usuario vinculante de React-Redux.

npm install react-redux 

Y el kit de herramientas Redux:

npm install @reduxjs/toolkit 

La biblioteca de Redux Toolkit es importante porque hace que el proceso de configuración de un repositorio de Redux sea rápido y fácil.

RELACIONADO  Cómo Crear Una Tabla De Rebajas

Crear una tienda Redux

Antes de comenzar a trabajar con la biblioteca de Redux, debe crear un contenedor (o repositorio) de estado de Redux. Dado que es un objeto que almacena el estado global de la aplicación Redux, necesitamos crear una tienda Redux.

Como la mayoría de los marcos frontend, React tiene un punto de entrada a la aplicación, que es un archivo o grupo de archivos de nivel superior. tanto índice.html y índice.webp Los archivos son dos archivos en el nivel superior de su aplicación React, aplicación.webp archivos y todos los componentes de la aplicación.

Por lo tanto índice.webp Los archivos son el lugar perfecto para crear una tienda Redux.

Actualización de index.webp con Redux Store

import React from 'react' 
import ReactDOM from 'react-dom'
import App from './App'
import reportWebVitals from "./reportWebVitals"
import {configureStore} from "@reduxjs/toolkit"
import { Provider } from 'react-redux'
import user from './reducers/user'
const store = configureStore({
reducer:{
user
}
})
ReactDOM.render(
React. StrictMode
Provider store={store}
App /
/Provider
/React. StrictMode,
document.getElementById('root')
)
reportWebVitals();

Hay mucho que desempaquetar en el código anterior, pero el mejor punto de partida es repositorio de configuración función. Inmediatamente verá los beneficios de instalar la biblioteca Redux Toolkit de la siguiente manera: repositorio de configuración Esta función crea un repositorio Redux en solo tres líneas de código.

Una aplicación React no sabría que la tienda Redux existe sin la tienda Redux. Componente de proveedor, de la biblioteca de enlaces React-Redux. El componente del proveedor toma un único accesorio (repositorio) y envuelve la aplicación React para que el repositorio de Redux sea accesible globalmente.

Tercera y última nueva importación índice.webp el archivo anterior reductor de usuario, que es muy importante para ejecutar la tienda Redux.

¿Por qué son importantes los reductores?

El propósito del reductor es cambiar. Estados de los componentes de la interfaz de usuario Residencia en Acción realizada. Por ejemplo, si está creando una aplicación escolar en línea, cada usuario debe iniciar sesión en la aplicación para acceder mediante el componente de inicio de sesión. Otro gran componente de esta aplicación es el componente Usuarios activos, que muestra el nombre o la dirección de correo electrónico de cada usuario cuando inician sesión en la aplicación.

RELACIONADO  Los 11 Mejores Cursos Gratuitos De Codificación En Línea Para La Programación De Computadoras

En el ejemplo anterior, el componente de usuario activo cambia cada vez que el usuario realiza una acción para iniciar sesión en la cuenta. Así que este ejemplo es una situación ideal para un reductor. También es importante recordar que los reductores solo pueden funcionar a través de la tienda Redux, que brinda acceso al estado del componente y las operaciones necesarias para realizar su función.

Crear reductor de usuario

import { createSlice } from "@reduxjs/toolkit"; 
export const userSlice = createSlice({
name: "user",
initialState: { value: {email: ""}},
reducers: {
login: (state, action) = {
state.value = action.payload
},
}
})
export const {login} = userSlice.actions
export default userSlice.reducer;

Dentro de reaccionar origen directorio telefónico puedes hacer directorio reductor, aquí es donde guardarás reductor de usuario Cualquier otro reductor que desee agregar a su repositorio de Redux. tanto usuario.webp importar el archivo anterior crearRebanada Características del kit de herramientas Redux.

Tanto crearRebanada la función acepta castillo, todos estado inicial, Y uno objeto reductor Guarda múltiples funciones reductoras. Pero el objeto reductor de arriba tiene conectar Toma un estado y una acción como argumentos y devuelve un nuevo estado.

El archivo user.webp exporta el reductor de inicio de sesión. Importe y use componentes de conexión. usar despacho () Abandonar.

Crear un componente de conexión

import React from 'react'; 
import Link from '@mui/material/Link';
import TextField from '@mui/material/TextField';
import Typography from '@mui/material/Typography';
import { Button, Box } from '@mui/material';
import { useDispatch } from 'react-redux';
import { login } from '../reducers/user';
import { useState } from 'react';
function Signin() {
const dispatch = useDispatch()
const [email, setEmail] = useState('')
const handleSubmit = () = {
dispatch(login({email: email}))
}

return (
div
Box
sx={{
my: 8,
display: 'flex',
flexDirection: 'column',
alignItems: 'center',
}}
Typography variant="h4" Sign In /Typography
TextField
label="Email Address"
required
id="email"
name="email"
margin="normal"
onChange={(e) = setEmail(e.target.value)}
/
TextField
label="Password"
required
id="password"
name="password"
type="password"
margin="normal"
/
Link
href="#"
sx={{mr: 12, mb: 2}}

forget password?
/Link
Button
variant="contained"
sx={{mt: 2}}
onClick={handleSubmit}

Sign In
/Button
/Box
/div
);
}
export default Signin;

El componente de inicio de sesión anterior utiliza la biblioteca MUI. Cree un formulario de inicio de sesión simple que requiera el correo electrónico y la contraseña del usuario. Se activa cuando se hace clic en el botón de conexión Función al hacer clic, llamar sumisión de gestión función.

RELACIONADO  Los 9 Mejores Juegos De Codificación Para Desarrollar Tus Habilidades De Programación

Tanto sumisión de gestión La función utiliza: usar estado () y Usar Defecto() gancho reductor de conexión Haga que la dirección de correo electrónico del usuario activo esté disponible en la tienda Redux. En la tienda Redux, todos los componentes de su aplicación React ahora pueden acceder al correo electrónico del usuario activo.

RELACIONADO: Hooks: Hero of React El siguiente componente de usuario activo recupera la dirección de correo electrónico del usuario activo usando: gancho useSelector() Renderizar a la interfaz de usuario de su aplicación.

Archivo ActiveUser.webp

import React from "react"; 
import { useSelector } from "react-redux";

function ActiveUsers() {
const user = useSelector((state) = state.user.value)
return (
div
h2Active Users/h2
p {user.email} /p
/div
);
}

Archivo App.webp actualizado

Echa un vistazo al siguiente código.

import React from "react"; import ActiveUsers from "./components/ActiveUsers"; import Signin from "./components/Signin"; 
function App() {
return ( div ActiveUsers/ Signin/ /div
);
}
export default App;

Tanto aplicación.webp El archivo anterior muestra tanto el usuario activo como los componentes de inicio de sesión de la aplicación React, produciendo el siguiente resultado en el navegador:

Interfaz de usuario de React Redux

Cuando un usuario inicia sesión en la aplicación, el componente de usuario activo se actualiza inmediatamente con el nuevo correo electrónico de usuario activo.

Interfaz de usuario actualizada

Interfaz de usuario de React Redux actualizada

¿Cuándo debo usar Redux?

Redux es una de las bibliotecas de administración de estado más populares. Principalmente porque hace un gran trabajo al generar código predecible y confiable. Redux es una opción ideal si muchos componentes de su aplicación usan el mismo estado de aplicación.

Usando el ejemplo anterior de la escuela, el componente de inicio de sesión, el componente de usuario activo, el componente de participante de clase y el componente de perfil también requieren la dirección de correo electrónico del usuario (u otro identificador único). Es por eso que Redux es la mejor opción aquí.

Sin embargo, si tiene un estado que solo es utilizado por uno o dos componentes como máximo, una mejor opción podría ser React props.

Si quieres conocer otros artículos parecidos a ¿Qué Es React Redux Y Cómo Lo Uso? puedes visitar la categoría Programación.

Subir