Para configurar o Redux, seguirei a mesma abordagem que fiz anteriormente no curso, adicionarei uma
pasta da loja e, lá, terei meus locais de ação. arquivo js e meus lugares-redutor. arquivo js.
É claro que é um
pouco diferente do que antes, lá eu tinha uma subpasta
de ações e redutores, você pode absolutamente
fazer o mesmo aqui, já que eu tenho apenas uma ação e um redutor, vou
manter isso em dois arquivos, mas você
pode ter subpastas e assim por diante, isso depende totalmente de você. Agora, no redutor de locais, vou definir como meu estado deve parecer para
essa parte do meu estado total e isso será muito
simples, meu estado inicial aqui é apenas um objeto Javascript onde quero ter uma chave de locais vazia , uma
matriz vazia no início, porque eu vou ter uma variedade de lugares e é isso.
Portanto, aqui, eu posso exportar essa função redutora que assume um estado definido para o estado inicial, se nenhum
outro
estado for passado e uma ação e por enquanto, por enquanto, retornarei esse estado, logo é claro que vamos ' Adicionamos lógica para
lidar com ações diferentes e, por exemplo, adicionamos um novo local. No arquivo de ações do local, exportarei uma nova
constante, adicionar local, que é um identificador de ação necessário e adicionarei uma função de criador de ações, local, que deverá receber
alguns dados sobre o local e para o momento, esse é apenas o título, mais tarde será mais
e aqui eu quero retornar meu objeto
de ação, em seguida,
onde o tipo é adicionar local e onde apenas tenho meus dados de local, digamos que no momento, é
claro, é composto apenas por o título, mas mais tarde novamente, isso será mais.
Esse é o aplicativo básico do Redux, agora é claro no aplicativo. js
precisamos conectar tudo. Então, como você aprendeu neste curso, podemos
importar algo do Redux e também algo do React Redux e também importar o Redux Thunk do Redux Thunk; portanto, deste pacote
também instalamos. Agora, no Redux,
precisamos criar armazenamentos e combinações de redutores e também aplicar middleware para aplicar o Redux Thunk e o React
Redux, precisamos desse componente de provedor e, com
isso, assim como fizemos várias vezes no curso, podemos criar nosso redutor de raiz com
a ajuda de redutores combinados.
Isso pega um objeto no qual mesclamos todos os redutores
juntos, agora obviamente temos apenas um redutor aqui e esse é o redutor de locais que importamos da pasta da
loja e lá, é o arquivo do redutor de locais, mas é
claro que você poderia ter mais redutores no aplicativo e mapeei isso para locais, para que o redutor de locais
seja mapeado para o identificador de locais aqui.
Agora, com isso, podemos criar nossa loja com a função create store e essa função pega o redutor de raiz e também
podemos passar um segundo argumento em que chamamos aplicar middleware e passar o Redux Thunk para essa função, para que o pacote
Redux Thunk seja gentil de conectado ao nosso fluxo Redux aqui. Com tudo isso configurado, podemos agrupar nosso navegador
de locais com o componente provedor, porque todas as telas em nosso aplicativo, em nosso navegador, devem ter acesso à
loja e ao provedor, passamos a loja pelo suporte da loja e esse é
o Redux também vimos várias vezes ao longo deste curso. Com o Redux configurado, podemos ir para a nova tela de
local e garantir que aqui no manipulador de salvar local acionado quando clicamos
nesse botão, na verdade adicionamos um novo local que, no momento, consiste apenas em seu título,
mas em curso, isso mudará ao longo deste curso. Para fazer isso, podemos importar o uso de dispatch do
React Redux e simplesmente obter acesso à função de envio executando o uso de dispatch lá em
cima e também, é claro, importar nossa ação, por exemplo, novamente, usando esta sintaxe de fusão de
importação aqui, importando tudo como lugares ações da loja e de lá, o arquivo de ações de locais e, com isso, podemos salvar o manipulador de
locais, chamar expedição aqui e enviar as ações de locais adicionar local e encaminhar o título, que obviamente é armazenado
em nosso valor de título, portanto, aqui . Agora, com isso, poderemos despachar essa ação, no redutor
de locais, agora podemos mudar
nosso tipo de ação ou usar se verificações, é claro, e procurar o estado de adicionar local ou a ação que importamos das ações de locais, além de adicionar o
caso padrão pela maneira em que retornamos o estado e, portanto, podemos nos livrar dessa
declaração de retorno lá em baixo e agora, se adicionar lugar é o que
obtivemos, então
podemos criar um novo local aqui e por isso, também como Antes deste curso, adicionarei
uma pasta de modelos com um local. arquivo js lá onde eu quero definir como um
local deve se parecer neste aplicativo, simplesmente para ter uma maneira fácil de criar novos objetos de
local sempre iguais.
Então, aqui, eu vou criar uma classe e exportar isso como o arquivo padrão e agora, é claro, depende de você como você quer que
seu lugar seja, definirei o meu com a ajuda do construtor para ter um ID e um title e
mais tarde
adicionaremos mais, mas, por
enquanto, é isso e
vou armazenar meu ID aqui e meu título aqui em uma propriedade. Com isso, temos um plano para novos
locais, de volta ao redutor de locais, agora podemos
usá-lo.
Então, lá podemos importar o local da pasta de modelos e lá, o local. js e, em seguida, aqui, crie um novo local chamando um novo
local. Inicializando ou instanciando um novo local com
base em nossa classe e para o ID, por enquanto, usarei um ID fictício do carimbo de data
e hora atuais e o No entanto, title é obviamente algo que podemos definir, porque isso faz parte da nossa ação. Lá,
nos dados do local, teremos uma propriedade title que contém o título que o usuário
definiu, então aqui eu
posso definir isso como ação. placeData. título.
Isso cria um novo objeto de
local e agora podemos retornar um novo estado aqui onde locais e não preciso copiar o antigo estado porque não tenho mais
nada no meu estado aqui e não adicionarei nada para que possa retornar um novo objeto de estado, onde
places agora é state. locais. concat, de modo que pega
a matriz antiga, adiciona um novo item e retorna uma nova matriz que substitui a antiga matriz
aqui em nosso
estado e concateno meu novo local, é claro. Com isso, devemos ter uma lista de lugares que gerenciamos. Na próxima palestra, agora podemos nos preocupar
em exibir
isso aqui na tela da lista de locais. Só mais uma coisa: quando adicionamos um novo
local aqui, clicando no manipulador de salvar local,
também quero voltar para a tela da lista
de locais. Portanto, depois de despachar essa ação, na verdade, usarei a navegação de adereços para voltar, então para voltar à
tela da lista de locais. E agora vamos trabalhar nessa tela de lista de locais e garantir que realmente
apresentamos uma lista de locais lá.