Continuaremos trabajando en la aplicación que creamos en el último módulo del curso con nuestras recetas
aquí y con los filtros que podríamos configurar y así sucesivamente, y hay dos cosas que debemos agregar donde necesitaremos Redux.
Una es que en realidad podemos marcar una receta como favorita haciendo clic en el ícono de la estrella, que esto en realidad lo marca
como favorito y que, por nuestra parte, también cambiamos este ícono para mostrar si ya es un favorito o no, pero lo
más importante, que
podemos ver esa receta como favorita aquí en la pestaña de favoritos. Y la otra cosa en la que necesitaremos Redux
es aquí en los filtros, allí cuando establecemos un filtro y luego lo guardamos, por supuesto, esto
debería tener un efecto en las comidas que estamos cargando aquí en nuestra pestaña de comidas en la lista de comidas cuando
seleccionamos una categoría. Allí esto
debería reflejarse, lo que establecemos en los filtros. En eso es en lo que trabajamos, para lo que necesitaremos
Redux y para eso, instalemos Redux y comencemos con él.
Para comenzar con Redux, cerraré mi servidor de exposición aquí,
el proceso de inicio de npm, lo cerraré temporalmente e instalaré
un paquete y ese sería
Redux y además de Redux, también necesitamos instalar React Redux porque eso es También se requiere trabajar
con Redux.
Entonces, ambos paquetes deben instalarse aquí y mientras se están instalando, ya podemos comenzar a trabajar en
nuestros archivos de código allí un poco porque en este proyecto, quiero agregar una nueva carpeta ahora y es la
carpeta de la tienda.
Ahora puede nombrar esta carpeta como quiera, no tiene que llamarse tienda, a Redux no le importa,
pero esta es la carpeta en la que quiero administrar mi configuración de Redux porque Redux se trata de esa
tienda central del estado.
Entonces, aquí en esa carpeta de la tienda, ahora podemos comenzar con Redux y no cubriré a Redux con el mayor detalle aquí, tengo un
curso completo de
React and Redux para eso si quieres aprender los entresijos de eso, por En este curso, en
realidad, asumo el conocimiento previo de React y Redux y, por lo tanto, esto solo será un breve repaso.
Redux al final tiene que ver con reductores, acciones y luego construir una tienda basada en estos
reductores y acciones.
Ahora, para eso aquí en esa carpeta de la tienda, agregaré una carpeta de acciones y agregaré una carpeta de reductores, en realidad
solo tendremos una acción y un archivo reductor en este proyecto, pero si tuviera más archivos que eso, tener Subcarpetas
separadas puede ser una buena idea para mantenerlo organizado y es por eso que las
creo aquí, a pesar de que para esta aplicación simple, no lo necesitaríamos porque no tendremos tantos archivos.
Comencemos con el reductor. En la carpeta
del reductor aquí, agregaré mis comidas. js y ese es el archivo donde fui a administrar la lógica de actualización del estado de mi reductor
de comidas.
Así que al final está el archivo donde escribiremos la lógica para marcar una comida
como favorita y para administrar nuestros filtros.
Ahora, un reductor en React es solo una función, así
que aquí crearé una función, la nombraré reductor de comidas, el nombre depende totalmente de usted y esta función
realmente recibirá dos argumentos: el estado, la instantánea del estado actual en la que puede construir arriba y derivar un nuevo estado
porque un reductor al final tendrá que devolver un nuevo estado que luego será tomado
por Redux y almacenado en su tienda.
Entonces obtienes el estado actual, antiguo aquí y obtienes la acción porque Redux ejecuta la función reductora
aquí cada vez que se
envía una nueva acción y, por lo tanto, tenemos acceso a la acción aquí para
que podamos averiguar si necesitamos actuar y lo que necesitamos hacer.
Entonces, dentro de esta función, al final, debe devolver un nuevo estado, en su forma más simple
que, por supuesto, significa que devolvemos el estado actual, lo que, por otro lado, significa que
este reductor no hace nada útil, pero lo haremos cambia eso.
Ahora, cuando ejecutamos nuestra aplicación por primera vez, también queremos configurar un estado inicial que se
usa inicialmente, por lo
que inicializa nuestro estado cuando se inicia esta aplicación y para esto, agregaré aquí un nuevo estado inicial constante
que contiene un simple Javascript objeto y allí, quiero almacenar una lista de mis comidas y luego también una lista de mis comidas filtradas porque
necesitaremos ambas: una lista de todas las comidas y una lista de las comidas que se ajustan a los filtros
que el usuario configuró y yo También quiero tener mis comidas favoritas aquí. Entonces, tres tipos de matrices de comidas que almaceno al final y, por
supuesto,
ese es solo un enfoque posible que podría
tomar aquí, ciertamente podemos encontrar otras formas de administrar nuestros datos aquí, pero me gusta esta.
Ahora, lo que necesitaré en este archivo son los datos ficticios de mis comidas, por lo que importaré comidas desde mi carpeta de datos
y allí desde los datos ficticios. js e inicializaré las comidas aquí con mi matriz de datos ficticios de comidas.
Las comidas filtradas también se inicializan con eso porque inicialmente cuando se inicia esta
aplicación, no tenemos configuración de filtros. Por otro lado, las comidas favoritas inicialmente son una matriz vacía porque, de nuevo, cuando se
inicia la aplicación, no tendremos comidas favoritas.
Por supuesto, en una aplicación real, es posible que desee almacenar ese estado en un servidor, de modo que cuando
el usuario cierre la aplicación y regrese más tarde, no comience desde
cero nuevamente, pero eso no es
algo que haremos aquí, usted Aprenderemos cómo llegar a un servidor y guardar datos allí y cargar datos desde allí
en módulos
separados más adelante en este curso, aquí mantendremos esto simple para enfocarnos en Redux.
Así que este es mi estado inicial, aquí en esta función ahora podemos usar una sintaxis de Javascript donde
asignamos nuestro estado inicial como un valor predeterminado para el argumento de estado, lo que significa que
cuando se ejecuta esta función reductora y el estado no está definido, que es el caso cuando Redux ejecuta nuestro
reductor por primera vez, comenzaremos
con ese estado inicial, por lo que luego
cargará automáticamente nuestro estado inicial, por ejemplo, porque cuando Redux se inicia y se inicia, se enviará una acción inicial
que es solía pasar por el reductor una vez y luego cargará nuestro estado inicial.
Con eso, podemos trabajar con un estado inicial que es bueno pero que por sí solo no nos
ayuda demasiado. Por el momento, eso
es todo,
ahora conectemos este reductor a Redux para que podamos usar nuestra tienda Redux en todas partes de la aplicación antes de
comenzar a enviar acciones y hacer cosas más útiles en el reductor. Por lo tanto, aquí por ahora, solo exportaré
el reductor de comidas por defecto aquí y ahora en la aplicación. js, que es el archivo donde se inicia
toda nuestra aplicación,
necesitamos configurar nuestra tienda Redux. Para
eso aquí, importamos crear tienda de Redux.
Además, tendremos que importar reductores combinados desde allí.
Esto nos permite ahora crear una tienda, solo necesitaremos nuestro reductor, así que
aquí importaré mi reductor de comidas y ahora apuntaré a la carpeta de la tienda, la carpeta de reductores y
allí, las comidas. js y
ahora tal vez aquí, podemos crear nuestra tienda aquí llamando a crear tienda. Ahora crear tienda toma un reductor al final
que debe pasar. Ahora, por supuesto, aquí, tenemos un reductor
y podríamos pasarlo, pero en aplicaciones más grandes, es posible que tenga más de un
reductor porque a menudo tiene reductores para las diferentes áreas de funciones de su aplicación, una para autenticación, otra para sus
productos, uno para el área de soporte de su aplicación y necesita fusionar todos estos reductores individuales, estos
diferentes reductores en un reductor raíz y eso es lo que hace la
función de reductores combinados, nuevamente aquí no lo necesitaríamos porque solo tenemos un reductor
pero para mostrarle el enfoque que
también podría usar con múltiples reductores, lo usaré aquí también. Así que tendré mi reductor de raíz aquí, que creo
llamando a los reductores combinados, los reductores combinados toman un objeto Javascript donde ahora asignamos nuestros reductores individuales, nuestros
diferentes reductores a teclas.
Entonces, por ejemplo aquí, podríamos tomar las comidas como una clave, pero ese nombre depende totalmente de usted y conectarlo
con el reductor de comidas, como este.
Lo que esto hace es que al final fusiona este reductor de comida en este reductor de raíz y luego podremos
trabajar con el estado administrado por el reductor de comidas, por lo
que con este estado que se inicializa así, con la ayuda de estas comidas propiedad, podremos acceder
a este estado,
esta porción del estado con esta propiedad más adelante, pero verá todo eso.
Así que ese es nuestro reductor de raíz y ahora solo tenemos que pasar el reductor de raíz para
crear una tienda, esto nos da una tienda y ahora ¿qué?
Ahora esta tienda necesita ser proporcionada a nuestra aplicación y para eso, necesitamos
ese otro paquete que instalamos que es React Redux.
A partir de ahí, podemos importar el componente del proveedor, proveedor como este. Luego envolvemos al proveedor alrededor de nuestro componente de la aplicación raíz al final, por
lo que alrededor del componente superior que contiene todos los demás componentes que eventualmente interactuarán con nuestra tienda
y el navegador de comidas es bastante bueno para eso porque contiene
todas nuestras pantallas, por lo que contiene todos componentes que eventualmente necesitaremos para despachar acciones o
acceder
a nuestro estado, así que lea de nuestro estado. Por lo tanto, aquí envolvemos el componente del proveedor alrededor del navegador
de comidas y ahora el proveedor toma una propiedad importante, un accesorio que tiene que pasar y ese es el accesorio de
la tienda y, por supuesto, allí, como un valor que pasamos nuestra tienda aquí.
Entonces, esta tienda constante que contiene la tienda creada se pasa al proveedor de accesorios de la tienda y detrás de escena,
esto nos da todo lo que necesitamos ahora para interactuar con Redux, con la tienda Redux en cualquier componente,
cualquier pantalla o cualquier otro componente de nuestra aplicación .
Ahora permítanme reiniciar esto con npm start y por el momento, esto no hará una gran
diferencia, pero nuestra aplicación aún debería funcionar,
por lo que no debería fallar por eso, así que verifiquemos que este sea el caso y vamos a vuelva a cargar aquí,
estamos presionando r dos veces en Android y comando r en iOS y veamos dónde todavía se carga como debería, sí, eso se ve bien aquí en
iOS y estoy bastante seguro de que también se cargará bien en Android, Sí, eso también está funcionando.
Entonces, ahora que Redux está
configurado, nuestra tienda está inicializada pero no la estamos usando.
Entonces, como siguiente paso, asegurémonos de usar nuestra tienda antes de ocuparnos de las acciones y hacer
un trabajo real en el reductor.