Hämta selektorer i Redux

Det är ofta mycket användbart att bli av med onödig kod i applikationen, samt att inkapsla data.

Låt oss öppna vår produktapplikation. Lägg märke till att vi på flera ställen i applikationen, med hjälp av selektorer, hämtar produktslicen för att utföra några åtgärder med den.

Och nu ska vi öppna vår productsSlice.js, gå ner till slutet av filen och lägga till ett par rader kod, där vi skriver två selektorer och exporterar dem. En funktion kommer att vara för att hämta alla produkter:

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

Och efter den den andra - för att hämta en produkt efter id:

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

Självklart kan du få en befogad fråga - varför har vi en sådan här konstruktion: state.products.products? Svaret är enkelt, vi ändrade ju förra lektionen strukturen på slicen och nu kommer våra produkter att finnas som en array i ett separat egenskap products i produktslicen state.products (kom ihåg att här är state rotobjektet för Redux-tillståndet, som innehåller alla slicar).

På så sätt flyttade vi bara koden för selektorfunktionerna till ett ställe i applikationen och nu behöver vi göra motsvarande ändringar där vi använde dem. Låt oss börja med filen ProductsList.jsx. Importera till den selectAllProducts, eftersom vi här behöver hämta alla produkter:

import { selectAllProducts } from './productsSlice'

Och i början av funktionen ProductsList, ersätter vi:

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

Med raden:

const products = useSelector(selectAllProducts)

Och nu går vi till filen ProductPage.jsx. Här behövde vi en produkt efter id. Vi byter ut raden (glöm inte importen):

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

Mot:

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

Gör en liknande ersättning själv i filen EditProductForm.jsx. Här behöver vi också en produkt efter id.

Kom ihåg att en sådan optimering bara är för din bekvämlighet och du kan göra den när du anser det nödvändigt och lämpligt. Och i vårt exempel, föreställ dig att vi skrev selektorfunktionens kod varje gång på olika ställen, och sedan ändrade strukturen på state, och då skulle vi behöva korrigera det i alla komponenter.

Öppna din studentapplikation. Öppna filen studentsSlice.js i den. Längst ner i filen, skriv och exportera, som visas i lektionen, två selektorer för att hämta alla studenter selectAllStudents och för att hämta en student efter id selectStudentById.

Importera nu selectAllStudents och selectStudentById till filerna StudentsList.jsx, StudentPage.jsx och EditStudentForm.jsx, gör motsvarande ändringar i dessa filer, som visas i lektionen.