Obtendo Seletores no Redux

Às vezes, é muito útil eliminar código desnecessário no aplicativo, bem como encapsular dados.

Vamos abrir nosso aplicativo de produtos. Observe que em vários locais do aplicativo nós, usando seletores, extraímos o slice de produtos para realizar algumas ações com ele.

E agora vamos abrir nosso productsSlice.js, descer até o final do arquivo e adicionar algumas linhas de código, onde escreveremos dois seletores e os exportaremos. Uma função será para obter todos os produtos:

export const selectAllProducts = (state) => state.products.products

E depois dela, a segunda - para obter um produto por id:

export const selectProductById = (state, productId) =>
	state.products.products.find((product) => product.id === productId)

Claro que pode surgir uma pergunta justa: de onde vem essa confusão: state.products.products? A resposta é simples, na lição anterior nós alteramos a estrutura do slice e agora nossos produtos estarão localizados como um array em uma propriedade separada products do slice de produtos state.products (lembre-se de que aqui state é o objeto raiz do estado do Redux, que contém todos os slices).

Assim, simplesmente movemos o código para as funções de seletores para um local no aplicativo e agora precisamos fazer as alterações correspondentes nos locais onde as usamos. Vamos começar pelo arquivo ProductsList.jsx. Vamos importar nele selectAllProducts, pois aqui precisaremos obter todos os produtos:

import { selectAllProducts } from './productsSlice'

E no início do código da função ProductsList, substitua:

const products = useSelector((state) => state.products)

Pela linha:

const products = useSelector(selectAllProducts)

E agora vamos para o arquivo ProductPage.jsx. Aqui precisávamos de um produto por id. Vamos substituir a linha (não se esqueça do import):

const product = useSelector((state) =>
	state.products.find((product) => product.id === productId)
)

Por:

const product = useSelector((state) => selectProductById(state, productId))

Faça uma substituição semelhante você mesmo no arquivo EditProductForm.jsx. Aqui nós também precisamos de um produto por id.

Lembre-se de que essa otimização é apenas para sua conveniência e você pode fazê-la quando achar necessário e conveniente. Em nosso exemplo, imagine se escrevêssemos o código da função seletora cada vez em locais diferentes, e depois mudássemos a estrutura do estado, então teríamos que corrigi-la em todos os componentes.

Abra seu aplicativo de estudantes. Abra nele o arquivo studentsSlice.js. No final do arquivo, escreva e exporte, como mostrado na lição, dois seletores para obter todos os estudantes selectAllStudents e para obter um estudante por id selectStudentById.

Agora importe selectAllStudents e selectStudentById nos arquivos StudentsList.jsx, StudentPage.jsx e EditStudentForm.jsx, faça as alterações correspondentes nesses arquivos, como mostrado na lição.