23. React + Redux + Rails: Agregar redux a un proyecto con react
TRANSCRIPCIÓN COMPLETA
bien continuamos ahora con los vídeos de
redux en esta ocasión ya vamos a
implementar wheelock shannon y su
aplicación en el vídeo pasado les
expliqué un poco acerca de cómo funciona
el ruido si no has visto este vídeo te
recomiendo que vayas y lo mires ahora
como se fijaran ya he aplicado todo lo
que habíamos dicho que íbamos a hacer al
formulario de algo de igual manera si
sientes que te falta algo puedes
descargar el repositorio que he dejado
allí en la descripción del vídeo ahora
para poder implementar redux a un
proyecto con royal lo que tenemos que
hacer es instalar las librerías
necesarias para eso vamos a poner en fm
en stock
6 para que se ponga en nuestro paquete
station y aquí vamos a poner arriba c's
también vamos a poner a otra librería
que se llama redux funk
y finalmente vamos a poner a raya
redux
presionamos enter para poder instalarlas
y algo que deben saber es que redux pues
contiene todas las funciones que
habíamos utilizado en el vídeo pasado
como stuart como dispatch
nos básicamente todo lo que hace que el
virus funcione
ruido c's es aquella librería que
contiene todas las funciones que
necesitamos para integrar riad o redux
de hecho ahorita lo vamos a ver cuando
lo integremos y finalmente redux pan que
es la más misteriosa básicamente lo que
hace es manejar lógica sincrónica dentro
del story redux y así no tener que hacer
que nuestros componentes lidian con ese
tipo de lógica si no es necesario así
que vamos a esperar un momento que se
termine
y ahora que se ha terminado podemos
correr en fm start
y como pueden ver aquí tenemos la
aplicación en la página de hong si nos
vamos a nuestros pages veremos que en
home estamos haciendo una llamada con
action una llamada get a nuestro
servidor con la dirección local boots
1500
ahora vamos a aplicar ruidos con esto
así que todo este tipo de cosas no las
vamos a manejar en nuestros componentes
para poder agregar barridos vamos a
incluir otras dos carpetas una que se va
a llamar actions
y otra que se va a llamar redusers
en actions vamos a tener un archivo
inicial que se va a llamar empresas
actions
punto j s
y en redusers vamos a tener a empresas y
duscher también vamos a tener otro
archivo adicional que se va a llamar
index punto j s
ahora que tenemos esto vamos a empezar
por editar la empresa soy duscher y este
va a tener como habíamos visto en el
vídeo pasado un estado inicial así que
vamos a poner inicio state
va a ser un objeto que va a contener dar
datos vamos a ponerle data
y eso va a venir de nuestro servidor
también vamos a poner aquí en esa
loading
para cuando la página se cargando vamos
a hacer que el estado de la audiencia si
está cargando
y error en caso de que ocurran problemas
aquí vamos a almacenar el mensaje de
error
así que para nuestro reducir vamos a
primero exportarlo sports default y el
nombre de read usuario no lo vamos a
poner de hecho vamos a exportar la
función directamente y como les había
dicho aquí vamos a tener dos variables
el state y en la acción y la acción que
estemos tomando el estado inicial va a
ser el state
y
en caso
de que estamos recibiendo una acción
pues podemos poner el action type
y si ese asunto es igual
no
loud dra
entonces vamos a hacer retrato de algo
ahorita especificamos de qué
y en caso de que sea loading
vas a hacer otra cosa y algo diferente
para el caso de que sea un error
finalmente si no se aplica ningún caso
vamos a tener un default
[Música]
que va a retornar el estado sin ningún
tipo de modificaciones ahora sí vamos a
especificar qué vamos a hacer en caso de
que tengamos que cargar los datos antes
que nada si ya tengo información en mi
objeto no quiero modificar esa
información así que vamos a poner
aquello que ya se encuentra en el state
y vamos a modificar el campo de etapa
aquí vamos a poner lo que venga de
action punto
y con eso pues ya estaríamos modificando
este campo lo mismo va a pasar con lo
ven
vamos a devolver todo el estado pero
vamos a modificar al loading para que
sea igual a chuck en caso de que esté
cargando la página y finalmente el error
cargamos el estado y el error
lo cambiamos por lo que venga del action
con eso ya podría decirse que terminamos
esta parte sin embargo hay que tener
también en cuenta primero nuestra página
va a cargar así que le saluden va a ser
pero luego cuando tenga todos esos datos
va a pasar a llamar al law tata el cual
va sencillamente a modificar el campo de
data mientras tanto loading va a seguir
siendo otro así que cuando lleguemos a
los data vamos a cambiar el load in
para que sea folds
por otro lado si tenemos un error de
algún tipo
también queremos limpiar ese error una
vez que ya las cosas estén funcionando
así que vamos a poner aquí
sin ningún tipo de mensaje
y por otro lado si nuestra página está
cargando el establo de envases pero si
al final de la carga ocurre algún error
entonces queremos hacer esto queremos
mostrar cuál es el error pero al mismo
tiempo ya dejaríamos de cargar la página
así que vamos a poner loading
host
y ahora sí con esto ya podría decirse
que terminamos nuestro read user para
empresas
así que voy a cerrar esto
y ahora me voy a dirigir aquí a el index
que había creado en los windows ers y lo
que vamos a hacer aquí es cargar todos
los virus sars que tengamos en esta
carpeta para eso vamos a usar
con reuters
esto viene de redux
y vamos a importar nuestro primer virus
porque hemos creado que es empresas
duscher
y ahora vamos a exportar
con valor y reuters
con
empresa soy dulce
que es por ahora el único que tenemos si
tuviéramos más pues la idea decirlos en
estando ahí
ahora me voy a ir a index
y aquí vamos a hacer un par de cambios
para qué redux para tener efecto en
nuestros componentes primero vamos a
importar
y esto
guay
poner aquí a ri docs
howard
también vamos a importar
provider
este viene de brillar redux
y finalmente vamos a importar
harry winston
from redux
así que con eso ya podemos crear nuestro
estudio
nuestro estudio va a contener los virus
seres que vengan de index que de hecho
no lo hemos importado así que vamos a
poner en quart
[Música]
reuters
rivers y como sea un archivo index
solamente que pongamos el nombre de la
carpeta automáticamente va a tomar ese
archivo
DESBLOQUEAR MÁS
Regístrate gratis para acceder a funciones premium
VISOR INTERACTIVO
Mira el video con subtítulos sincronizados, superposición ajustable y control total de la reproducción.
RESUMEN DE IA
Obtén un resumen instantáneo generado por IA del contenido del video, los puntos clave y las conclusiones.
TRADUCIR
Traduce la transcripción a más de 100 idiomas con un solo clic. Descarga en cualquier formato.
MAPA MENTAL
Visualiza la transcripción como un mapa mental interactivo. Comprende la estructura de un vistazo.
CHATEA CON LA TRANSCRIPCIÓN
Haz preguntas sobre el contenido del video. Obtén respuestas impulsadas por IA directamente desde la transcripción.
SACA MÁS PARTIDO A TUS TRANSCRIPCIONES
Regístrate gratis y desbloquea el visor interactivo, los resúmenes de IA, las traducciones, los mapas mentales y mucho más. No se requiere tarjeta de crédito.