Como começar com o Redux?
Crie uma pasta separada no local desejado e abra a janela do terminal.
Depois de executar com sucesso o comando mencionado acima, você verá diferentes pastas na barra lateral da nossa tela do Visual Studio.
Aqui você pode ver uma pasta chamada src; Exclua todos os arquivos presentes dentro desta pasta SRC. Além disso, faça um novo arquivo e nomeie JS completamente índice.JS. Depois de criar este novo arquivo, abra o terminal e escreva o seguinte comando.
Como você pode ver no snippet acima, o Node Package Manager (NPM) instalará o Redux Toolkit em nosso projeto de aplicativo React usando o comando de instalação.
Agora, criamos nosso aplicativo React e também é feito com a instalação do Redux Toolkit. É hora de definir nossos componentes Redux neste projeto de aplicativo React.
Então, antes de tudo, vamos montar a loja do nosso Redux. Então, para isso, teremos que importar o
Configurestore função do redux.
Geralmente, usamos o createestore função interna para criar a loja, mas Configurestore é uma maneira aprimorada de criar a loja, então criaremos nossa loja usando o Configurestore função. A sintaxe é
importar configureStore de 'redux';
Agora vamos definir o segundo componente mais Redux i-e, redutor. Como sabemos, ele pega o estado atual e executa uma ação ou evento nele, então agora definiremos a função do redutor.
Loja A função precisa ser atualizada cada vez que o redutor age em um estado. Em todas as ações que o redutor executa, sabemos que o estado atual mudará para um estado atualizado. Para atualizar os valores do estado da loja, precisamos usar a função de assinatura da loja.
O snippet de código acima diz como podemos definir nossa loja e redutor para o Redux junto com a descrição. Se você executar o código acima usando o comando npm iniciar, verá a mensagem Reducer exibida na tela do seu console.
Agora, como executamos nossa loja e redutor, vamos verificar se a loja está sendo atualizada cada vez que o redutor executa um evento ou ação em seu estado atual. Então, para isso, precisamos despachar uma ação.
Cada ação pode ou não ter um tipo diferente, mas a ação deve ter um tipo. É assim que queremos realizar algo com um propósito significativo. O tipo de ação pode ser increment_number, decrement_number, add_user, delete_records, etc.
Atualizamos nosso código com o despacho de nossas ações da loja para o redutor. O redutor executará essas ações no estado atual e retornará o estado atualizado. Posteriormente, a função de assinatura ajudará a loja a atualizar os valores de status na loja para uso futuro.
Você pode ver no trecho acima que o redutor executou a ação do número de incremento para o estado = 0 e retornou o estado = 1, a loja atualizou esta resposta do redutor. Ao despachar a outra ação com um incremento em número, o redutor novamente aumentou no estado e o tornou estado = 2. Quando executado pelo redutor nos resultados, a última ação despachada de número decrescente atualiza o estado do estado = 2 para o estado = 1.
Conclusão
Neste artigo, crie um aplicativo de reação simples para começar com o Redux. O código do Visual Studio é utilizado para criar o aplicativo. Este artigo demonstra um código simples que exerce redux. O Node Package Manager (NPM) instala o Redux Toolkit em nosso projeto de aplicativo React usando o comando de instalação. Portanto, você pode praticá -lo e fazer outros experimentos para o seu próprio aprendizado.