El objetivo de la pantalla de descripción general del producto, por supuesto, es presentar una lista de todos los productos que podemos pedir
y, por lo tanto, aquí, por supuesto, tendremos un componente React normal, por
lo que debemos importar React desde React.
También tendremos que importar un montón de cosas de React Native con seguridad,
por ejemplo, necesitaré una lista plana aquí porque generaré una lista de productos, no sabemos cuánto tiempo
será esa lista, pero potencialmente es muy largo, por lo que queremos poder optimizarlo para el
desplazamiento y eso es
lo que hace la lista plana de fábrica y podemos importar más componentes cuando los necesitemos.
Estas son las dos
importaciones básicas, ahora con eso crearé los componentes de la pantalla de vista general de mis productos aquí simplemente en este formulario de función aquí donde recibimos accesorios y luego
tenemos que devolver algunos jsx aquí al final y al final, lo haré También exporto la pantalla de resumen de
mis productos aquí como el valor predeterminado de este archivo. Ahora con eso, la pregunta, por
supuesto, es qué hay allí. Lo que hay dentro de nuestro componente y allí,
por supuesto, quiero renderizar mi lista
plana, quiero renderizar mi lista plana de productos.
Ahora, por supuesto, todavía no tenemos productos, pero podemos agregar algunos. Al igual que antes, agregaré una carpeta de
modelos donde puedo definir cómo debería ser un producto.
Esto no es obligatorio, pero puede ayudarlo a organizar sus datos y asegurarse de que nunca
trabaje accidentalmente con diferentes tipos de productos, donde simplemente olvidó agregar una determinada propiedad en un lugar
de su aplicación.
Por lo tanto, aquí en los productos. js en la carpeta de modelos, crearé una
clase de producto que tiene un constructor donde defino cómo debe verse un producto y quiero que cada producto tenga una
ID única, también debe tener una ID de propietario, que es la ID de El usuario que lo creó.
Debería tener un título, debería
tener una imagenUrl, debería tener una descripción y debería tener un precio, estas
son las cosas que componen un producto para mí en esta aplicación.
Ahora, por supuesto, cuando recibimos todas estas cosas como argumentos en el constructor, quiero
almacenarlas en las propiedades de este objeto que podemos crear con la ayuda de
este constructor, por lo tanto, hago esta asignación que
también vio antes de donde almaceno Todos los datos que recibimos en las propiedades del objeto creado.
Así que aquí, almacenamos el título, el imageUrl, los ID y, por supuesto, la descripción y el precio. Con eso configurado aquí, tenemos un plan para un producto
y lo usaremos en Redux y al final obtendremos dicha lista de productos aquí
en nuestra pantalla de resumen de productos. Ahora para llegar allí, necesitamos aprovechar Redux
y para que eso sea posible, necesitamos configurar Redux.
Así que vamos a la carpeta de la tienda ahora y allí, quiero tener una subcarpeta de acciones
y una subcarpeta de reductores, en esta aplicación, por cierto, tendremos diferentes reductores y
acciones, a diferencia del último módulo aquí.
Entonces, por el momento, comenzaremos con los productos. archivo js aquí
en la carpeta reductores y también agregaré productos. js en la carpeta de acciones.
Nuevamente, si le resulta confuso que tenemos el mismo nombre aquí en diferentes carpetas, siempre puede ver en qué
archivo estoy aquí en la parte superior aquí con esta función de ruta de navegación
y, por supuesto, también podría trabajar con diferentes nombres en su aplicación
si Esto es confuso, creo que está bastante claro, aunque en qué archivo estoy trabajando, también está claramente seleccionado aquí.
Entonces, comencemos con el reductor de productos y allí quiero definir mi estado inicial porque este
tipo define cuántos productos se verán relacionados con el segmento de estado
y, por supuesto, como siempre en la programación hay más de un enfoque
posible, creo que tiene sentido decir que tenemos una lista de productos disponibles, que es una matriz y de productos de usuario y productos
de usuario, estos son simplemente los productos que
creamos, por lo que la identificación
del propietario es la identificación del usuario actualmente conectado y para Por el momento, no tendremos ninguna
función de inicio de sesión, pero más tarde ese será el caso, por
el momento simplemente configurará esto de una manera ficticia. El producto disponible debe ser todos los productos o tal vez solo los
productos que no creamos para que no podamos comprar nuestros propios productos, aunque en realidad en la mayoría de las tiendas, también
puedes comprar lo que vendes, así que creo que también
podemos simplemente tome todos los productos aquí, pero eso es algo que también puede ajustar en su aplicación.
Entonces tenemos estos dos arreglos de productos. Ahora en el reductor aquí, que es una función donde obtenemos el estado que
debe inicializarse con nuestro estado inicial
y debe tomar esto como un valor predeterminado y donde obtenemos una acción, allí manejaremos diferentes tipos de acciones
para que podamos por ejemplo, agregue un nuevo producto y así sucesivamente. Por el momento, siempre devolveré mi estado aquí y,
por lo tanto, siempre
devolveré mi estado inicial, por supuesto, y eso nos permitirá acceder a Redux
y al menos obtener ese estado inicial.
Ahora, por supuesto, sin la posibilidad de agregar nuevos productos, nuestro estado inicial no es tan útil porque tiene listas vacías
de productos aquí, por lo que no
hay nada que podamos mostrar.
Entonces, tal como lo
hice antes, también agregaré una carpeta de datos y configuraré algunos datos ficticios aquí que no usaremos en todo
el módulo, pero que podemos usar por ahora para tener algunos productos para comenzar
con y para esto, adjuntas estos datos ficticios. archivo js que puede tomar para reemplazar el suyo o donde puede
copiar el contenido en sus datos ficticios. js y lo que hago
allí es que importo mi modelo de producto, así que,
por supuesto, debe asegurarse de que esta ruta sea correcta para usted si
solo copió mi código y luego configuro esta matriz de productos aquí donde tengo un montón de productos ficticios y
ahora es importante, obtenemos la identificación del producto, luego la identificación del propietario, el título y usted debe asegurarse
de que el modelo de su producto esté configurado para que este pedido sea correcto.
Entonces, aquí obtenemos el título, luego obtenemos la imagenUrl como el cuarto argumento que recibe, luego tiene la descripción como el quinto
y el precio como el último argumento, así que asegúrese
de que su modelo de producto esté configurado de la manera que esto Es el orden de los argumentos.
Esto es lo que
tiene aquí, al final exporto esta matriz como
predeterminada y, por lo tanto, ahora en este reductor de productos, simplemente podemos importar esto.
Entonces podemos importar productos, nuestra lista de productos ficticios desde la carpeta de datos y allí
desde los datos ficticios. js y podemos simplemente inicializar nuestros productos
disponibles con productos aquí por el momento y los productos de usuario también se pueden inicializar con eso, aunque para
los productos de usuario hay una pequeña diferencia que quiero hacer, quiero filtrarlos por un cierta identificación del propietario porque
al final, no todos los productos serán creados por nosotros. En cambio, filtraré esa matriz ficticia, veré todos
los productos que solo incluyen productos en mi matriz de productos de usuario donde la identificación del propietario
es igual a U1, que si observa los datos ficticios es simplemente el caso de algunos productos, no para todos
ellos.
Algunos de ellos tienen la identificación de propietario U1 y estos serán los productos que utilizo aquí como productos
de usuario, como una configuración ficticia. con eso nuestro reductor para los productos se configura aquí. podemos ignorar las acciones de los productos por el
momento, por supuesto agregaremos algunas más tarde y ahora podemos ir a la aplicación. js y configura Redux allí
también.
Para eso, necesitamos importar algo de Redux
y, por supuesto, también necesitamos importar algo de React Redux.
Ahora, esto es algo que necesitamos importar desde Redux aquí y que,
por supuesto, es la función de crear tienda y las funciones de reductores combinados, para que
podamos crear un reductor de raíz. Por el momento, por supuesto, solo tenemos
un reductor, pero como mencioné en esta aplicación, en realidad tendremos múltiples
reductores al final, por lo que aquí definitivamente necesita combinar sus reductores y de React Redux, necesitamos el
componente de proveedor que envolvemos alrededor de nuestra aplicación para proporcionar algo. Entonces, por supuesto, también tendremos que importar el reductor
de productos o, como quiera, nombrarlo desde la carpeta de la tienda, desde los reductores y desde el archivo
de productos para que luego podamos crear nuestro reductor raíz llamando a los reductores combinados,
donde luego Pase un objeto donde mapeamos, digamos a los productos, pero eso depende de usted, nuestro reductor de productos y
luego agregaremos más reductores allí y luego podremos crear nuestra tienda con create store y esto al
final toma nuestro reductor de raíz como un argumento y de allí en adelante en el código jsx, crearé
mi componente de proveedor entre las etiquetas de apertura y cierre, luego también tendré mi pantalla, por el
momento, no tendremos nada allí, esto no es válido jsx por cierto, pero lo arreglaremos más
tarde y para el componente del proveedor, por supuesto, tenemos que establecer
el accesorio de la tienda y establecerlo en la tienda constante o en la
tienda en general que estamos creando aquí. Con eso, se debe configurar Redux, con lo que luego podremos acceder aquí
desde la pantalla de descripción general de productos y, por supuesto, el siguiente paso también es agregar navegación para que podamos ver
esa pantalla de descripción general del producto. Entonces, sigamos trabajando en estos pasos a
continuación.