Дар Redux селекторҳо гирифтан

Гаҳе-гаҳо хеле муфид аст, ки аз рамзи зиёди бегона дар барнома халос шавед, ҳамчунин маълумотро капсула кунед.

Биёед барномаи худро бо маҳсулот кушоем. Диққат диҳед, ки дар чанд ҷои барнома мо, бо истифода аз селекторҳо, буридаи маҳсулотро мекашем, то баъзе амалҳо бо он анҷом диҳем.

Ва ҳоло мо productsSlice.js-и худро мекушоем, то поёни файл мерасем ва як-ду сатри рамз илова мекунем, ки дар он ду селектор менависем ва онҳоро содир мекунем. Яке аз функсияҳо барои гирифтани ҳамаи маҳсулот хоҳад буд:

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

Ва баъд аз он дуввумӣ - барои гирифтани як маҳсулот бо id:

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

Албатта, шумо метавонед як саволи адолатманд дошта бошед - аз куҷо мо чунин навор дорем: state.products.products? Ҷавоб сода аст, зеро мо дар дарси гузашта сохтори буридаро тағйир додем ва акнун маҳсулоти мо дар шакли массиви дар хусусияти алоҳидаи products буридаи маҳсулот state.products ҷойгиранд (ба ёд доред, ки дар ин ҷо state - ин объекти решаи ҳолати Redux мебошад, ки ҳамаи буридаҳоро дар бар мегирад).

Пас, мо танҳо рамз барои функсияҳои-селекторро ба як ҷо дар барнома гузаронидем ва акнун ба мо лозим аст тағйироти мувофиқро дар он ҷо ки мо онҳоро истифода кардем ворид кунем. Аз файли ProductsList.jsx оғоз кунем. Онро ворид кунем selectAllProducts, зеро дар ин ҷо ба мо лозим меояд, ки ҳамаи маҳсулотро гирем:

import { selectAllProducts } from './productsSlice'

Ва дар оғози рамзи функсияи ProductsList, иваз кунем:

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

Бо сатр:

const products = useSelector(selectAllProducts)

Ва акнун ба файли ProductPage.jsx гузарем. Дар ин ҷо ба мо маҳсулот бо id лозим буд. Иваз кардани сатрро анҷом медиҳем (ворид карданро фаромӯш накунед):

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

Ба:

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

Худ дар файл чунин ивазро анҷом диҳед EditProductForm.jsx. Дар ин ҷо ба мо ҳамчунин маҳсулот бо id лозим аст.

Дар хотир доред, ки чунин беҳтарсозӣ танҳо барои осониии шумост ва шумо метавонед онро анҷом диҳед вақте, ки зарурӣ ва мувофиқ ҳис кунед. Ва дар мисоли мо тасаввур кунед, ки мо рамзи функсияи-селекторро ҳар дафъа дар ҷойҳои гуногун менвиштем, ва баъд сохтори ҳолатро тағйир медодем, ва пас мебоист онро дар ҳамаи компонеитҳо ислоҳ мекардем.

Барномаи худро бо донишҷӯён кушоед. Файли studentsSlice.js-ро дар он кушоед. Дар поёни файл нависед ва содир кунед, тавре ки дар дарс нишон дода шудааст, ду селектор барои гирифтани ҳамаи донишҷӯён selectAllStudents ва барои гирифтани як донишҷӯ бо id selectStudentById.

Акнун selectAllStudents ва selectStudentById-ро ба файлҳои StudentsList.jsx, StudentPage.jsx ва EditStudentForm.jsx ворид кунед, дар ин файлҳо тағйироти заруриро ворид кунед, тавре ки дар дарс нишон дода шудааст.