O que é React Redux e como usá-lo?

Redux é uma biblioteca de gerenciamento de estado gratuita que funciona no front-end de aplicativos JavaScript, gerenciando o estado de cada componente em uma IU. A biblioteca Redux facilita a separação entre o código que gerencia e armazena dados em um aplicativo e o código que gerencia eventos e seus efeitos nos vários componentes da IU de um aplicativo.

Um dos principais pontos de venda do Redux é que ele é flexível. Você pode usar o Redux com quase qualquer framework ou biblioteca JavaScript.

A equipe Redux criou três bibliotecas, ou seja, Redux, React-Redux e Redux Toolkit. Todas as três bibliotecas trabalham juntas para fornecer o máximo de sua experiência de desenvolvimento React e, neste artigo do tutorial, você aprenderá como usá-las.

A importância do React-Redux

Embora Redux seja uma biblioteca de gerenciamento de estado independente, usá-lo com qualquer framework ou biblioteca front-end requer uma biblioteca de vinculação de IU. Uma biblioteca de vinculação de UI lida com a lógica de interação do contêiner de estado (ou armazenamento), que é um conjunto de etapas predefinidas que conecta uma estrutura de front-end à biblioteca Redux.

React-Redux é a biblioteca oficial do Redux UI para aplicativos React e é mantida pela equipe do Redux.

Relacionado: Como criar seu primeiro aplicativo React com JavaScript

Instalando Redux em seu diretório de projeto

Existem duas maneiras de obter acesso à biblioteca Redux em seu aplicativo React. A abordagem recomendada pela equipe Redux é usar o seguinte comando ao criar um novo projeto React:

npx create-react-app my-app --template redux

O comando acima configura automaticamente o Redux Toolkit, React-Redux e a loja Redux. No entanto, se quiser usar Redux em um projeto React existente, basta instalar a biblioteca Redux como uma dependência com o seguinte comando:

npm install redux

Seguido pela biblioteca de IU de vinculação React-Redux:

npm install react-redux

E o kit de ferramentas Redux:

npm install @ reduxjs / toolkit

A biblioteca do Redux Toolkit também é importante porque torna o processo de configuração da loja Redux rápido e fácil.

Criando uma Loja Redux

Antes de começar a trabalhar com a biblioteca Redux, você precisará criar um contêiner de estado Redux (ou armazenamento). Criar um armazenamento Redux é necessário porque é o objeto que armazena o estado global do aplicativo Redux.

O React, como a maioria dos frameworks front-end, tem um ponto de entrada em seus aplicativos, que é um arquivo ou grupo de arquivos no nível superior. O index.html e index.js arquivos são dois arquivos que estão no nível superior de um aplicativo React, que está acima do App.js arquivo e todos os componentes do aplicativo.

Então o index.js arquivo é o lugar ideal para criar uma loja Redux.

Atualizando index.js com a Redux Store

importar React de 'react'
importar ReactDOM de 'react-dom'
importar aplicativo de './App'
importar reportWebVitals de "./reportWebVitals"
importar {configureStore} de "@ reduxjs / toolkit"
importar {Provider} de 'react-redux'
importar usuário de './reducers/user'
const store = configureStore ({
 redutor:{
 do utilizador
 }
})
ReactDOM.render (




,
 document.getElementById ('root')
)
reportWebVitals ();

Há muito para desempacotar no código acima, mas o melhor lugar para começar é com o configureStore função. Imediatamente você começará a ver os benefícios de instalar a biblioteca do Redux Toolkit como o configureStore função cria a loja Redux com apenas três linhas de código.

Seu aplicativo React não saberia que a loja Redux existe sem o componente de provedor, que vem da biblioteca de ligação React-Redux. O componente do provedor pega um único objeto (a loja) e envolve o aplicativo React, tornando a loja Redux globalmente acessível.

A terceira e última nova importação no index.js o arquivo acima é o redutor de usuário, o que é de vital importância para o funcionamento da sua loja Redux.

Por que um redutor é importante?

O objetivo de um redutor é mudar um Estado do componente da IU baseado em um ação realizada. Por exemplo, se você estiver criando um aplicativo escolar online, exigirá que cada usuário faça login no aplicativo para obter acesso usando um componente de login. Outro ótimo componente para este aplicativo é um componente de usuário ativo, que exibirá o nome de cada usuário ou endereço de e-mail quando ele fizer login em seu aplicativo.

No exemplo acima, o componente de usuário ativo mudará cada vez que um usuário realizar a ação de fazer login em sua conta. Este exemplo é, portanto, uma situação ideal para um redutor. Também é importante lembrar que um redutor só pode realizar sua função por causa do Redux loja que dá acesso ao estado de qualquer componente e a ação necessária para realizar seu obrigações.

Criação do redutor de usuário

importar {createSlice} de "@ reduxjs / toolkit";
export const userSlice = createSlice ({
 nome: "usuário",
 initialState: {value: {email: ""}},
 redutores: {
 login: (estado, ação) => {
 state.value = action.payload
 },
 }
})
export const {login} = userSlice.actions
exportar userSlice.reducer padrão;

Dentro do React's srcdiretório você pode criar um diretório redutor, que é onde você armazenará seu redutor de usuário e qualquer outro redutor que você deseja adicionar à sua loja Redux. O user.js arquivo acima importa o createSlice função do Redux Toolkit.

O createSlice função aceita um nome, um Estado inicial, e um objeto redutor que armazena várias funções do redutor. No entanto, o objeto redutor acima tem apenas uma função redutora chamada Conecte-se que recebe um estado e uma ação como argumentos e retorna um novo estado.

O arquivo user.js exporta o redutor de login. O componente de login importa e usa no useDispatch () gancho.

Criação do componente de login

importar React de 'react';
importar Link de '@ mui / material / Link';
importar TextField de '@ mui / material / TextField';
importar tipografia de '@ mui / material / Typography';
import {Button, Box} de '@ mui / material';
import {useDispatch} de 'react-redux';
importar {login} de '../reducers/user';
import {useState} de 'react';
function Signin () {
 const dispatch = useDispatch ()
 const [email, setEmail] = useState ('')
 const handleSubmit = () => {
 despacho (login ({email: email}))
 }
Retorna (


sx = {{
meu: 8,
display: 'flex',
flexDirection: 'coluna',
alignItems: 'center',
}}>
 Entrar 
label = "Endereço de email"
requeridos
id = "email"
nome = "email"
margem = "normal"
onChange = {(e) => setEmail (e.target.value)}
/>
label = "Senha"
requeridos
id = "senha"
nome = "senha"
type = "senha"
margem = "normal"
/>
href = "#"
sx = {{mr: 12, mb: 2}}
>
Esqueceu a senha?

variante = "contido"
sx = {{mt: 2}}
onClick = {handleSubmit}
>
Entrar





);
}
exportar signin padrão;

O componente de login acima usa a biblioteca MUI. Ele cria um formulário de login simples que requer o e-mail e a senha do usuário. Clicar no botão de login irá acionar um função onClick, que irá chamar o handleSubmit função.

O handleSubmit função usa o useState () e useDispact () ganchos junto com o redutor de login para disponibilizar o endereço de e-mail de um usuário ativo na loja Redux. Na loja Redux, todos os componentes do aplicativo React agora têm acesso ao e-mail de um usuário ativo.

Relacionado: Ganchos: o herói da reação O seguinte componente de usuário ativo recupera o endereço de e-mail de um usuário ativo com a ajuda do useSelector () gancho e o renderiza para a IU do aplicativo.

O arquivo ActiveUser.js

import React de "react";
import {useSelector} de "react-redux";
function ActiveUsers () {
 const user = useSelector ((state) => state.user.value)
 Retorna (


Usuários ativos

 {user.email} 




 );
}

O arquivo App.js atualizado

Dê uma olhada neste pedaço de código:

import React de "react"; importar ActiveUsers de "./components/ActiveUsers"; importar Signin de "./components/Signin";
function App () {
Retorna ( 
);
}
exportar aplicativo padrão; 

O App.js o arquivo acima renderiza os usuários ativos e os componentes de login em seu aplicativo React, criando a seguinte saída em seu navegador:

Se um usuário entrar no aplicativo, o componente de usuários ativos será atualizado imediatamente com um novo e-mail de usuário ativo.

A IU atualizada

Quando você deve usar Redux?

Redux é uma das bibliotecas de gerenciamento de estado mais populares, principalmente porque faz um excelente trabalho na criação de código previsível e confiável. Se muitos componentes em um aplicativo usam o mesmo estado de aplicativo, Redux é a escolha ideal.

Usando o exemplo da escola acima, o componente de login, o componente de usuário ativo, o participante da aula componente, e até mesmo um componente de perfil precisará do endereço de e-mail de um usuário (ou algum outro identificador). É por isso que Redux é a melhor opção aqui.

No entanto, se você tiver um estado que só é usado por um ou dois componentes, no máximo, uma opção melhor pode ser os adereços React.

Como usar acessórios no ReactJS

Se você está procurando dicas sobre como usar os adereços no ReactJS, você está no lugar certo.

Leia a seguir

Sobre o autor