Muitos aplicativos de React hoje em dia usam o Redux para a gestão dos dados do aplicativo.
Os dados são armazenados em uma única store, também chamada de Estado do Aplicativo. Essa entidade é, na maioria dos casos, nada mais nada menos que um simples objeto de JavaScript, com propriedades indexadas por uma chave e que tem um valor correspondente.
Normalmente o objeto do Estado é dividido em varias subseções, cada uma responsável, por exemplo, por um recurso diferente do aplicativo.
A função connect() do módulo de npm react-redux é normalmente usada para disponibilizar partes do Estado do Aplicativo via props passadas ao componente alvo.
Por exemplo:
const mapStateToProps = state => {
return {
propriedade1: state.recurso1.propriedade1,
propriedade2: state.recurso2.propriedade2
};
}
connect(mapStateToProps)(MeuComponente);
Para acessar propriedade1 e propriedade2, sempre temos que fornecer ao mapStateToProps o caminho para achar os dados: state.recurso1.propriedade1 e state.recurso2.propriedade2, respectivamente.
Vários componentes podem ter que requerir esses dados, então teríamos que escrever os caminhos de acesso numeras vezes.
Se um dos caminhos mudar, todos os componentes terão que ser atualizados com o novo caminho.
Para evitar isso, podemos criar seletores: simples funções que tomam o state como argumento, seguem o caminho requerido, e finalmente retornam os dados correspondentes:
const propriedade1Seletor = (state) => {
return state.recurso1.propriedade1;
}
const propriedade2Seletor = (state) => {
return state.recurso2.propriedade2;
}
Esses seletores podem ser armazenados em um arquivo e exportados para todos os componentes que precisarem acessar a parte do Estado do Aplicativo correspondente ao seletor.
Partindo do exemplo anterior, um certo componente que precisasse acessar os dados propriedade1 e propriedade2 teria que usar:
const mapStateToProps = state => {
return {
propriedade1: propriedade1Seletor(state),
propriedade2: propriedade2Seletor(state)
};
}
Agora se o caminho de cada recurso mudar, só é preciso mudar o código do seletor. Não precisa mudar nada nos componentes que usam o seletor. A lógica de percorrer o caminho para achar os dados está encapsulada na implementação do seletor.
Para aprender mais sobre seletores com React and Redux, assista às aulas no NBK Mundo Tech:
Obrigado por postar! Esse comentário é o novo bot que dará upvote 5% para todos os posts que usam a tag #pt. Ainda não votou em mim como witness? Clique aqui e dê o seu voto! É rápido!
Não conheço muito sobre, mas sempre dou uma olhada para ver se pelo menos tenho uma perspectiva geral. Acho muito interessante as camadas de desenvolvimento das linguagens e a arquitetura por traz disso. Valeu!
Posted using Steeve, an AI-powered Steem interface
Hi bro, I have some tasks related to vue and react all on Github and utopian approved. Can you help me with some? I have some steem bounty too and the bounty isn’t big as I am really short on funds but I will love to tip additional steem especially where contributions are timely. I really need help basically.
Here is a list:
https://steemit.com/utopian-io/@surpassinggoogle/in-dire-need-of-help-are-you-ready-to-make-your-picks-1500-steem-and-20-000-teardrops-shared-among-a-collection-of-development
Most of the assigned tasks havent really been taken yet as those who were assigned became unavailable.
The projects are steemgigs.org and ulogs.org