Атрыманне селектараў у Redux

Часам вельмі карысна пазбавіцца ад лішняга кода ў прыкладанні, а таксама інкапсуляваць даныя.

Давайце адкрыем наша прыкладанне з прадуктамі. Звярніце ўвагу, што ў некалькіх месцах прыкладання мы, выкарыстоўваючы селектары, выцягваем слайс з прадуктамі, каб зрабіць з ім якія-небудзь дзеянні.

А зараз мы адкрыем наш productsSlice.js, спусцімся ў самы канец файла і дадамі пару радкоў кода, у якім напішам два селектары і экспартуем іх. Адна функцыя ў нас будзе для атрымання ўсіх прадуктаў:

products/productsSlice.jsexport const selectAllProducts = (state) => state.products.products

А пасля яго другая - для атрымання аднаго прадукту па id:

products/productsSlice.jsexport const selectProductById = (state, productId) =>
  state.products.products.find((product) => product.id === productId)

Вядома ў вас можа ўзнікнуць слушнае пытанне - адкуль у нас такі вось наварат: state.products.products? Адказ просты, мы ж на мінулым занятці змянілі структуру слайса і цяпер нашы прадукты будуць знаходзіцца ў выглядзе масіва ў асобнай уласцівасці products слайса прадуктаў state.products (памятайце, што тут state - гэта караневы аб'ект стан Redux, які змяшчае ўсе слайсы).

Такім чынам мы проста перанеслі код для функцый-селектараў у адно месца ў прыкладанні і цяпер нам трэба ўнесці адпаведныя змены там, дзе мы іх выкарыстоўвалі. Пачнем з файла ProductsList.jsx. Імпартуем у яго selectAllProducts, паколькі тут нам трэба будзе атрымаць усе прадукты:

products/ProductsList.jsximport { selectAllProducts } from './productsSlice'

І ў пачатку кода функцыі ProductsList, замянім:

products/ProductsList.jsxconst products = useSelector((state) => state.products)

На радок:

products/ProductsList.jsxconst products = useSelector(selectAllProducts)

А цяпер перайдзем да файла ProductPage.jsx. Тут нам патрэбны быў прадукт па id. Зробім замену радка (не забудзьце пра імпарт):

products/ProductPage.jsxconst product = useSelector((state) =>
  state.products.find((product) => product.id === productId)
)

На:

products/ProductPage.jsxconst product = useSelector((state) => selectProductById(state, productId))

Зрабіце падобную замену самі ў файле EditProductForm.jsx. Тут нам таксама патрэбны прадукт па id.

Памятайце, што такая аптымізацыя толькі для вашага зручнасці і вы можаце зрабіць яе тады, калі палічыце патрэбнай і зручнай. А на нашым прыкладзе ўявіце, што мы б пісалі код функцыі-селектара кожны раз у розных месцах, а потым бы змянілі структуру стэйта, і прыйшлося б яго тады выпраўляць ва ўсіх кампанентах.