¿Qué es React Redux y cómo se usa?

Redux es una biblioteca de administración de estado gratuita que funciona en el front-end de las aplicaciones JavaScript, administrando el estado de cada componente dentro de una interfaz de usuario. La biblioteca Redux facilita una separación entre el código que administra y almacena datos en una aplicación y el código que administra eventos y sus efectos en los diversos componentes de la interfaz de usuario de una aplicación.

Uno de los principales puntos de venta de Redux es que es flexible. Puede usar Redux con casi cualquier marco o biblioteca de JavaScript.

El equipo de Redux ha creado tres bibliotecas, a saber, Redux, React-Redux y Redux Toolkit. Las tres bibliotecas trabajan juntas para brindarte el máximo provecho de tu experiencia de desarrollo de React y, en este artículo tutorial, aprenderás a usarlas.

La importancia de React-Redux

Aunque Redux es una biblioteca de administración de estado independiente, su uso con cualquier marco o biblioteca de front-end requiere una biblioteca de enlace de interfaz de usuario. Una biblioteca de enlace de interfaz de usuario maneja la lógica de interacción del contenedor de estado (o tienda), que es un conjunto de pasos predefinidos que conecta un marco de front-end a la biblioteca Redux.

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

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

Instalación de Redux en su directorio de proyectos

Hay dos formas de obtener acceso a la biblioteca 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 - plantilla redux

El comando anterior configura automáticamente Redux Toolkit, React-Redux y la tienda Redux. Sin embargo, si desea usar Redux en un proyecto React existente, simplemente puede instalar la biblioteca Redux como una dependencia con el siguiente comando:

npm instalar redux

Seguido por la biblioteca de interfaz de usuario de enlace React-Redux:

npm instalar react-redux

Y el kit de herramientas de Redux:

npm install @ reduxjs / kit de herramientas

La biblioteca Redux Toolkit también es importante porque hace que el proceso de configuración de la tienda Redux sea rápido y fácil.

Crear una tienda Redux

Antes de que pueda comenzar a trabajar con la biblioteca de Redux, deberá crear un contenedor (o tienda) de estado de Redux. La creación de una tienda Redux es necesaria porque es el objeto que almacena el estado global de la aplicación Redux.

React, como la mayoría de los frameworks front-end, tiene un punto de entrada en sus aplicaciones, que es un archivo o grupo de archivos en el nivel superior. El index.html y index.js Los archivos son dos archivos que se encuentran en el nivel superior de una aplicación React, que está por encima del App.js archivo y todos los componentes de la aplicación.

Entonces el index.js file es el lugar ideal para crear una tienda Redux.

Actualización de index.js con Redux Store

importar Reaccionar desde 'reaccionar'
importar ReactDOM desde 'react-dom'
importar la aplicación desde './App'
importar reportWebVitals desde "./reportWebVitals"
importar {configureStore} desde "@ reduxjs / toolkit"
importar {Proveedor} de 'react-redux'
importar usuario desde './reducers/user'
const store = configureStore ({
 reductor: {
 usuario
 }
})
ReactDOM.render (




,
 document.getElementById ('raíz')
)
reportWebVitals ();

Hay mucho que descomprimir en el código anterior, pero el mejor lugar para comenzar es con el configureStore función. Inmediatamente comenzará a ver los beneficios de instalar la biblioteca Redux Toolkit como el configureStore La función crea la tienda Redux con solo tres líneas de código.

Su aplicación React no sabría que la tienda Redux existe sin el componente de proveedor, que proviene de la biblioteca de enlaces React-Redux. El componente del proveedor toma un solo accesorio (la tienda) y se envuelve alrededor de la aplicación React, lo que hace que la tienda Redux sea accesible a nivel mundial.

La tercera y última nueva importación en el index.js archivo de arriba es el reductor de usuario, que es de vital importancia para el funcionamiento de su tienda Redux.

¿Por qué es importante un reductor?

El propósito de un reductor es cambiar un Estado del componente de la interfaz de usuario basado en acción realizada. Por ejemplo, si está creando una aplicación escolar en línea, necesitará que cada usuario inicie sesión en la aplicación para obtener acceso mediante un componente de inicio de sesión. Otro gran componente de esta aplicación es un componente de usuario activo, que mostrará el nombre o la dirección de correo electrónico de cada usuario cuando inicien sesión en su aplicación.

En el ejemplo anterior, el componente de usuario activo cambiará cada vez que un usuario realice la acción de iniciar sesión en su cuenta. Este ejemplo es, por tanto, una situación ideal para un reductor. También es importante recordar que un reductor solo puede realizar su función debido a Redux tienda que le da acceso al estado de cualquier componente y la acción que necesita para llevar a cabo su deberes.

Creación del reductor de usuario

importar {createSlice} desde "@ reduxjs / toolkit";
exportar const userSlice = createSlice ({
 nombre: "usuario",
 initialState: {value: {email: ""}},
 reductores: {
 inicio de sesión: (estado, acción) => {
 state.value = action.payload
 },
 }
})
export const {login} = userSlice.actions
exportar userSlice.reducer predeterminado;

Dentro de React srcdirectorio puedes crear un directorio reductor, que es donde almacenarás tus reductor de usuario y cualquier otro reductor que desee agregar a su tienda Redux. El user.js archivo anterior importa el createSlice función del kit de herramientas de Redux.

El createSlice la función acepta un nombre, un estado inicialy un objeto reductor que almacena múltiples funciones reductoras. Sin embargo, el objeto de reductores anterior solo tiene una función de reductor llamada acceso que toma un estado y una acción como argumentos y devuelve un nuevo estado.

El archivo user.js exporta el reductor de inicio de sesión. El componente de inicio de sesión lo importa y lo usa en el useDispatch () gancho.

Creación del componente de inicio de sesión

importar Reaccionar desde 'reaccionar';
importar Enlace desde '@ mui / material / Link';
importar TextField desde '@ mui / material / TextField';
importar tipografía de '@ mui / material / Typography';
importar {Botón, Cuadro} de '@ mui / material';
importar {useDispatch} de 'react-redux';
importar {login} desde '../reducers/user';
importar {useState} de 'reaccionar';
función Signin () {
 envío const = useDispatch ()
 const [email, setEmail] = useState ('')
 const handleSubmit = () => {
 despacho (iniciar sesión ({email: email}))
 }
regreso (


sx = {{
mi: 8,
pantalla: 'flex',
flexDirection: 'columna',
alignItems: 'centro',
}}>
 Iniciar sesión 
label = "Dirección de correo electrónico"
requerido
id = "correo electrónico"
nombre = "correo electrónico"
margin = "normal"
onChange = {(e) => setEmail (e.target.value)}
/>
label = "Contraseña"
requerido
id = "contraseña"
nombre = "contraseña"
type = "contraseña"
margin = "normal"
/>
href = "#"
sx = {{señor: 12, mb: 2}}
>
¿contraseña olvidada?

variante = "contenido"
sx = {{mt: 2}}
onClick = {handleSubmit}
>
Iniciar sesión





);
}
exportar inicio de sesión predeterminado;

El componente de inicio de sesión anterior utiliza la biblioteca MUI. Crea un formulario de inicio de sesión simple que requiere el correo electrónico y la contraseña de un usuario. Al hacer clic en el botón de inicio de sesión, se activará una función onClick, que llamará al handleSubmit función.

El handleSubmit la función usa el useState () y useDispact () ganchos junto con el reductor de inicio de sesión para que la dirección de correo electrónico de un usuario activo esté disponible en la tienda Redux. Desde la tienda Redux, todos los componentes de la aplicación React ahora tienen acceso al correo electrónico de un usuario activo.

Relacionado: Hooks: el héroe de React El siguiente componente de usuario activo recupera la dirección de correo electrónico de un usuario activo con la ayuda del useSelector () gancho y lo muestra en la interfaz de usuario de la aplicación.

El archivo ActiveUser.js

importar React de "reaccionar";
importar {useSelector} de "react-redux";
function ActiveUsers () {
 const user = useSelector ((estado) => estado.user.value)
 regreso (


Usuarios activos

 {user.email} 




 );
}

El archivo App.js actualizado

Eche un vistazo a este fragmento de código:

importar React de "reaccionar"; importar ActiveUsers desde "./components/ActiveUsers"; importar Signin desde "./components/Signin";
función App () {
regreso ( 
);
}
exportar la aplicación predeterminada; 

El App.js El archivo anterior muestra tanto a los usuarios activos como a los componentes de inicio de sesión en su aplicación React creando la siguiente salida en su navegador:

Si un usuario inicia sesión en la aplicación, el componente de usuarios activos se actualizará inmediatamente con un nuevo correo electrónico de usuario activo.

La interfaz de usuario actualizada

¿Cuándo debería utilizar Redux?

Redux es una de las bibliotecas de administración de estado más populares, principalmente porque hace un excelente trabajo al crear código predecible y confiable. Si muchos componentes de una aplicación utilizan el mismo estado de aplicación, Redux es la opción ideal.

Usando el ejemplo de la escuela anterior, el componente de inicio de sesión, el componente de usuario activo, el participante de la clase componente, e incluso un componente de perfil necesitará la dirección de correo electrónico de un usuario (o alguna otra identificador). Es por eso que Redux es la mejor opción aquí.

Sin embargo, si tiene un estado que solo lo usan uno o dos componentes como máximo, entonces una mejor opción puede ser React props.

Cómo usar accesorios en ReactJS

Si está buscando consejos sobre cómo usar accesorios en ReactJS, está en el lugar correcto.

Leer siguiente

Sobre el Autor