Para configurar Redux, seguiré el mismo enfoque que hice anteriormente en el curso, agregaré una
carpeta de la tienda y allí tendré mis lugares de acción. archivo js y mi reductor de lugares. archivo js.
Por supuesto, eso es
un poco diferente que antes, allí tenía una subcarpeta
de acciones y reductores, puede hacer
absolutamente lo mismo aquí, ya que solo tengo una acción y un reductor,
lo guardaré en dos archivos,
pero podría tener subcarpetas, etc., eso depende totalmente de usted. Ahora, en el reductor de lugares, definiré cómo debería ser mi estado para
esta parte de mi estado total y eso será muy
simple, mi estado inicial aquí es solo un objeto Javascript donde quiero tener una clave de lugares que está vacía
, una matriz vacía al principio porque tendré una variedad de lugares y eso es todo.
Por lo tanto, aquí, puedo exportar esta función reductora que toma un estado que se establece en el estado
inicial
si no se pasa ningún otro estado y una acción y allí por ahora, simplemente devolveré ese estado, pronto, por supuesto, ' Agregaré lógica
para manejar diferentes acciones y, por ejemplo, agregaré un nuevo lugar. En el archivo de acciones de lugares, exportaré una
nueva constante, agregar lugar, que es un identificador de acción que necesitaré y agregaré una función creadora de acción, agregar lugar, que
debería tomar algunos datos sobre el lugar y para momento, ese es solo el título, más tarde será
más y aquí quiero devolver mi objeto
de acción y luego
donde el tipo es agregar lugar y donde solo tengo mis datos de lugar, digamos que en este momento,
por supuesto, solo está compuesto de el título pero luego nuevamente, eso será más.
Esa es la aplicación básica de Redux, ahora, por supuesto, en la aplicación.
Necesitamos conectar todo. Entonces, como lo aprendió en este curso, podemos
importar algo de Redux y también algo de React Redux y también importar Redux Thunk de Redux Thunk, por lo que desde este paquete
también lo instalamos. Ahora, desde Redux, necesitamos
crear una tienda y combinar reductores y también aplicar middleware para aplicar Redux Thunk y desde React Redux, necesitamos ese
componente de proveedor y con eso, tal como
lo hicimos varias veces en el curso, podemos crear nuestro reductor de raíz Con la
ayuda de los reductores combinados.
Esto toma un objeto donde fusionamos todos los reductores,
ahora obviamente solo tenemos un reductor aquí y ese es el reductor de lugares que importamos de la carpeta de
la tienda y allí, es el archivo reductor de lugares, pero por
supuesto, podría tener más reductores en su aplicación y asignaré esto a lugares, por lo que el reductor de
lugares se asigna al identificador de lugares aquí.
Ahora con eso, podemos crear nuestra tienda con la función de crear tienda y esta función toma el reductor raíz y
también podemos pasar un segundo argumento donde llamamos aplicar middleware y pasar Redux Thunk a esa función para que el paquete Redux
Thunk sea amable de conectado a nuestro flujo de Redux aquí. Con todo eso configurado, podemos envolver nuestro navegador de
lugares con el componente del proveedor porque cada pantalla de nuestra aplicación, en nuestro navegador, debe tener acceso a la tienda
y al proveedor, pasamos la tienda a través del accesorio de la tienda y ese es
el Redux configuración que también vimos varias veces durante este curso. Con Redux configurado, podemos ir a la pantalla del nuevo lugar y
asegurarnos de que aquí, en el controlador de guardar lugar que se activa cuando hacemos
clic en este botón, agreguemos un nuevo lugar que por el momento solo consiste en su título, pero
Por supuesto, eso cambiará a lo largo de este curso. Para hacer eso, podemos importar el despacho de uso de React
Redux y simplemente obtener acceso a la función de despacho ejecutando el despacho de uso allí y también,
por supuesto, importar nuestra acción, por ejemplo nuevamente con el uso de esta sintaxis de fusión de importación
aquí, con importar todo como lugares acciones desde la tienda y allí, el archivo de acciones de lugares y con eso, podemos ir a guardar el controlador de
lugar, llamar al despacho aquí y despachar acciones de lugares agregar lugar y reenviar el título que, por supuesto, se almacena
en nuestro valor de título, así que aquí aquí . Ahora con eso, podremos enviar esta acción, en el
reductor de lugares, ahora podemos cambiar
nuestro tipo de acción o usar si verificamos, por supuesto, y buscar el estado o acción de agregar lugar que importamos de las acciones de lugares, también agregar el caso
predeterminado, por cierto, donde simplemente devolvemos el estado y, por lo tanto, podemos deshacernos de
esta declaración de devolución allí y ahora, si agregar lugar es lo que obtuvimos,
bueno, entonces
podemos crear un nuevo lugar aquí y para eso, también como antes en este curso, agregaré
una carpeta de modelos con un lugar. archivo js allí donde quiero definir cómo debería ser un
lugar en esta aplicación, simplemente para tener una manera fácil de crear nuevos objetos de lugar que
siempre sean iguales.
Entonces, aquí, crearé una clase y exportaré esto como el archivo predeterminado y ahora, por supuesto, depende de usted cómo quiere que se vea
su lugar, definiré el mío con la ayuda del constructor para tener una ID y un título y luego
agregaremos más,
pero por ahora, eso
es todo y guardaré
mi identificación aquí y guardaré mi título aquí en una propiedad. Con eso tenemos un plan para nuevos lugares,
de vuelta en el reductor de lugares, ahora podemos usar
eso.
Entonces podemos importar el lugar desde la carpeta de modelos y allí, el lugar. js y luego aquí, cree un nuevo lugar llamando a un nuevo lugar,
así que al inicializar o instanciar un nuevo lugar
basado en nuestra clase y para la ID, utilizaré por el momento una ID ficticia de la fecha y hora
actual y la Sin embargo, el título es, por supuesto, algo que podemos establecer porque es parte de nuestra acción, allí, en el
lugar de los datos, tendremos una propiedad de título que contiene el título que el
usuario configuró, por lo
que aquí puedo configurarlo como acción. placeData. título.
Esto crea un nuevo objeto de
lugar y ahora podemos devolver un nuevo estado aquí donde lugares y no necesito copiar el estado anterior porque no tengo nada más
en mi estado aquí y no agregaré nada, así que solo puedo devolver un nuevo objeto de estado, donde
lugares ahora es estado. lugares. concat, de modo que toma
la matriz anterior, agrega un nuevo elemento y devuelve una matriz nueva que reemplaza la matriz anterior
aquí en nuestro
estado y concaté mi nuevo lugar, por supuesto. Con eso, deberíamos tener una lista de lugares que gestionamos. En la próxima conferencia, ahora podemos preocuparnos por
mostrar esto
aquí en la pantalla de la lista de lugares. Solo otra cosa, cuando agreguemos un nuevo lugar aquí
haciendo clic en el controlador de guardar lugar, también
quiero volver a la pantalla de la lista de
lugares, así que aquí, después de enviar esta acción, en realidad usaré la navegación de accesorios para volver, así que para volver a la
pantalla de la lista de lugares. Y ahora trabajemos en esa pantalla de lista de lugares y asegurémonos de que
realmente generemos una lista de lugares allí.