O objetivo da tela de visão geral do produto é apresentar uma lista de todos os produtos que podemos solicitar
e, portanto, aqui, é claro, teremos um componente React normal, portanto,
precisamos importar o React do React.
Também precisaremos importar um monte de coisas do React Native, com certeza,
por exemplo, precisarei de uma lista simples aqui porque exibirei uma lista de produtos, não sabemos
quanto tempo essa lista será, mas é potencialmente por muito tempo, queremos otimizá-lo para rolagem,
e é isso
que a lista simples faz fora da caixa e podemos importar mais componentes conforme necessário.
Portanto, essas são as
duas importações de base. Agora, com isso, criarei os componentes da tela de visão geral dos meus produtos aqui, simplesmente neste formulário de função, onde recebemos adereços e, em
seguida, temos que retornar alguns jsx aqui no final e no final. Também exporte a tela de visão geral
dos meus produtos aqui como o padrão deste arquivo. Agora, com isso, a questão, claro,
é o que há lá? O que há dentro do nosso componente e lá dentro,
é claro que quero renderizar minha lista
fixa, quero renderizar minha lista plana de produtos.
Agora, é claro, ainda não temos produtos, mas podemos adicionar alguns. Assim como antes, adicionarei uma pasta de modelos
na qual posso definir a aparência de um produto.
Isso não é obrigatório, mas pode ajudá-lo a organizar seus dados e garantir que você nunca trabalhe acidentalmente
com diferentes tipos de produtos, nos quais você simplesmente esqueceu de adicionar uma determinada propriedade em um local
do seu aplicativo.
Então, portanto, aqui nos produtos. js na pasta models, criarei uma classe de
produto que tem um construtor onde defino a aparência de um produto e quero que cada produto tenha um ID
exclusivo; ele também deve ter um ID de proprietário, que é o ID de o usuário que o criou.
Deve ter um título,
deve ter um imageUrl, deve ter uma descrição e deve ter um preço,
estas são as coisas que compõem um produto para mim nesta aplicação.
Agora, é claro, quando recebemos todas essas coisas como argumentos no construtor, quero
armazená-las nas propriedades deste objeto, que podemos criar com a ajuda desse
construtor, portanto, faço essa tarefa que você
também viu antes de guardar. todos os dados que recebemos nas propriedades do objeto criado.
Então, aqui, armazenamos o título, o imageUrl, os IDs e, é claro, a descrição e o preço. Com isso configurado aqui, temos um plano para um produto e
depois o usaremos no Redux e, no final, obteremos uma lista de produtos aqui
na tela de visão geral de produtos. Agora, para chegar lá, precisamos acessar o Redux
e, para que isso seja possível, precisamos configurar o Redux.
Então, vamos para a pasta da loja agora e ali, quero ter uma subpasta de ações e
uma subpasta redutores, neste aplicativo pela maneira como teremos redutores e ações
diferentes, ao contrário do último módulo aqui.
Então, por enquanto, começaremos com os produtos. js aqui na
pasta reducers e também adicionarei um produto. arquivo js na pasta de ações.
Novamente, se é confuso para você que temos o mesmo nome aqui em pastas diferentes, você sempre pode
ver em qual arquivo estou aqui no topo aqui com esse recurso de navegação e,
é claro, você também pode trabalhar com nomes diferentes no seu aplicativo
se isso é confuso, acho que é bem claro, mas em qual arquivo estou trabalhando, é claramente selecionado aqui também.
Então, vamos começar no redutor de produtos e aí eu quero definir meu estado inicial, porque
esse tipo de definição de quantos segmentos de estado relacionados a produtos
será exibido e, é claro, como sempre na programação há mais de
uma abordagem possível, acho que faz sentido dizer que temos uma lista de produtos disponíveis, que é uma matriz e de produtos e
produtos para usuários, esses são simplesmente os
produtos que criamos, portanto, onde o
ID do proprietário é o ID do usuário conectado no momento e para o Neste momento,
não teremos o recurso de login, mas mais tarde será esse o
caso. No momento, você configurará isso de maneira simples. O produto disponível deve ser todos os produtos ou talvez apenas os
produtos que não criamos para que não possamos comprar nossos próprios produtos, embora, na realidade, na maioria das lojas, você também
possa comprar o que vende, então acho que também podemos
basta levar todos os produtos aqui, mas é algo que você também pode ajustar em seu aplicativo.
Portanto, temos essas duas matrizes de produtos. Agora, no redutor aqui, que é uma função em que obtemos o estado que deve
ser inicializado com o nosso estado inicial
e deve levar isso como um valor padrão e onde obtemos uma ação, lá mais tarde manipularemos diferentes tipos de ação
para que possamos por exemplo, adicione um novo produto e assim por diante. Por enquanto, sempre retornarei meu estado aqui e,
portanto, sempre retornarei meu
estado inicial, é claro, e isso nos permitirá explorar o Redux e,
pelo menos, obter esse estado inicial.
Agora, é claro, sem a possibilidade de adicionar novos produtos, nosso estado inicial não é tão útil, porque
possui listas vazias de produtos aqui,
então nada poderíamos renderizar.
Assim como fiz antes,
também adicionarei uma pasta de dados e configurarei aqui alguns dados fictícios que não usaremos em todo o módulo,
mas que podemos usar por enquanto, para que tenhamos alguns produtos para começar com
e para isso, você encontra anexados esses dados fictícios. arquivo js que você pode usar para substituir o seu ou onde você
pode copiar o conteúdo para seus dados fictícios. O arquivo js e o
que faço lá importam meu modelo de produto; portanto, é
claro que você deve se certificar de que esse caminho esteja correto se
você apenas copiou meu código e, em seguida, configurei essa matriz de produtos aqui, onde tenho muitos de produtos fictícios
e agora é importante, obtemos o ID do produto, obtivemos o ID do proprietário, obtivemos o título e você deve
verificar se o modelo do seu produto está configurado para que esse pedido esteja correto.
Então, aqui temos o título, depois temos o imageUrl como o quarto argumento que você recebe, e você tem a descrição
como o quinto e o preço como o último argumento.
Portanto, verifique se o modelo do seu produto está configurado da maneira que este é a ordem dos argumentos.
É isso que você
tem aqui. No final, exporto essa matriz
como padrão e, portanto, agora neste redutor de produtos, podemos simplesmente importar isso.
Assim, podemos importar produtos, nossa lista de produtos fictícios da pasta de dados e, a
partir dos dados fictícios. js e podemos simplesmente inicializar nossos produtos
disponíveis com produtos aqui por enquanto e os produtos para usuários também podem ser inicializados com isso, embora, para os
produtos para usuários, exista uma pequena diferença que eu queira fazer, desejo filtrá-los por um determinado ID do proprietário porque,
no final, nem todos os produtos serão criados por nós. Em vez disso, filtrarei essa matriz fictícia e analisarei
todos os produtos que incluem apenas produtos na minha matriz de produtos de usuário em que o ID do proprietário
é igual a U1 que, se você der uma olhada nos dados fictícios, é o caso de alguns produtos, não para todos
eles.
Alguns deles têm o ID do proprietário do U1 e esses serão os produtos que eu uso aqui como
produtos para usuários, como uma configuração fictícia. com isso, nosso redutor para os produtos está configurado aqui. podemos ignorar as ações dos produtos no momento,
é claro que adicionaremos algumas mais tarde e agora podemos acessar o aplicativo. js e configure o Redux
também.
Para isso, precisamos importar algo do Redux
e, claro, também precisamos importar algo do React Redux.
Agora, isso é algo que precisamos importar do Redux aqui e
que é, obviamente, a função create store e as funções combinadas de redutores, para
que possamos criar um redutor raiz. No momento, é claro que temos apenas
um redutor, mas como mencionei neste aplicativo, na verdade, teremos vários redutores
no final, então aqui você definitivamente precisa combinar seus redutores e, a partir do React Redux, precisamos do componente
de provedor que envolvemos em torno de nosso aplicativo para fornecer algo. É claro que também precisaremos importar o redutor
de produtos ou, no entanto, você deseja nomeá-lo da pasta da loja, dos redutores e do arquivo de
produtos, para que possamos criar nosso redutor de raiz posteriormente, chamando redutores combinados, onde
então passar um objeto onde mapeamos, digamos para produtos, mas isso depende de você, nosso redutor de produtos e, mais
tarde, adicionaremos mais redutores lá e, em seguida, poderemos criar nossa loja com create store e,
no final, usaremos nosso redutor de raiz como um argumento e, posteriormente, lá embaixo no código jsx, criarei meu
componente de provedor entre as tags de abertura e fechamento; depois, também terei minha tela mais tarde;
no momento, não teremos nada lá, isso não é válido jsx a propósito, mas vamos corrigi-lo
mais tarde e para o componente provedor, é claro que temos que
definir o suporte da loja e configurá-lo como a constante da loja ou a
loja em geral que estamos criando aqui. Com isso, o Redux deve ser configurado, com o qual mais tarde poderemos acessá-lo
aqui na tela de visão geral dos produtos e, com isso, é claro, o próximo passo também é adicionar navegação para que possamos
ver a tela de visão geral do produto. Então, vamos continuar trabalhando nessas etapas a
seguir.