Форма для рэдагавання даных у Redux

Цяпер у нас ёсць рэдьюсер для змены даных у store. На гэтым уроке мы створым форму, з дапамогай якой мы зможам рэдагаваць даныя прадукту.

Давайце адкрыем наша прыкладанне з прадуктамі і створым у папцы products файл EditProductForm.jsx. Стварэнне кампанента EditProductForm будзе аналагічна NewProductForm, за выключэннем некаторых адрозненняў, на якіх мы будзем спыняцца. Таму скапіюйце цалкам код NewProductForm.jsx і ўстаўце яго ў створаны файл EditProductForm.jsx. Цяпер пачнем па парадку.

Забярыце з імпарту nanoid, тут нам не трэба генераваць id. Заменіце імпарт productAdded на productUpdated, бо тут мы будзем выкарыстоўваць action для абнаўлення, а не для дадання прадукту.

Далей зменім назву функцыі нашага кампанента з NewProductForm на EditProductForm.

Перад тым, як мы завядзем лакальныя стэйты ў функцыі EditProductForm для name, desc, price і amount, давайце ўставім яшчэ некалькі радкоў кода. Як мы ўжо згадвалі раней, тут нам не трэба генераваць id. Цяпер наша задача атрымаць яго з даных якія змяняюцца прадукту. Мы ўжо так рабілі пры стварэнні асобнай староначкі для прадукту. Такім чынам, атрымаем id пры дапамозе хука useParams, а затым знойдзем патрэбны нам прадукт, выкарыстоўваючы хук useSelector (не забудзьце імпартаваць абодва хука ў пачатку файла):

products/EditProductForm.jsxlet params = useParams()
const { productId } = params

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

Пасля гэтага зменім блок з аб'явай лакальных стэйтаў. Цяпер нам трэба ў якасці пачатковага значэння задаваць ім атрыманыя з store даныя прадукту. Вось так будзе выглядаць першы стэйт, перарабіце тры якія засталіся самі:

products/EditProductForm.jsxconst [name, setName] = useState(product.name)

Пасля прызначэння пераменнай для useDispatch давайце ўнясём яшчэ адзін радок кода на гэты раз для хука useNavigate. Мы будзем яго выкарыстоўваць для вяртання на старонку з прадуктам, калі карыстальнiк захоча ўнесеныя ў форме змены:

products/EditProductForm.jsxconst navigate = useNavigate()

Таксама імпартуйце гэты хук у пачатку файла:

products/EditProductForm.jsximport { useNavigate, useParams } from 'react-router-dom'

Далей у нас ідуць апрацоўшчыкі для поляў уводу. А пасля іх нам неабходна паправіць функцыю onSaveProductClick. Цяпер у ёй пры кліку мы будзем адпраўляць экшэн productUpdated з атрыманым id і змененымі данымі ў выглядзе аб'екта. Пасля дадамо наш navigate, для пераходу на староначку змененага прадукту:

products/EditProductForm.jsxconst onSaveProductClick = () => {
  if (name && desc && price && amount) {
    dispatch(
      productUpdated({
        id: productId,
        name,
        desc,
        price,
        amount,
      })
    );
    
    navigate(`/by/products/${productId}`);
  }
}

Засталося толькі ў нашай якая вяртаецца вёрстцы знайсці радок:

products/EditProductForm.jsx<h2>Add a New Product</h2>

І замяніць яе на:

products/EditProductForm.jsx<h2>Edit Product</h2>