23. React + Redux + Rails: Agregar redux a un proyecto con react

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