Внесување на промени во форма во Redux

На оваа лекција ќе ја завршиме работата по излегување на информации за продавачот во формата за додавање на производ. За ова нам останува малку да ја промениме верстката на формата.

Да ја отвориме нашата апликација со производи, а во неа датотеката NewProductForm.jsx. Да пред командата return додадеме парче код за верстка на падачката листа, во која ќе го избираме продавачот. Ќе го имплементираме преку стандарден начин со map:

products/NewProductForm.jsxconst sellersList = sellers.map((seller) => (
  <option key={seller.id} value={seller.id}>
    {seller.name}
  </option>
))

И сега ќе внесеме промени во самата верстка. За ова во формата помеѓу првиот и вториот абзац (помеѓу блоковите на верстка за името и описот на производот) ќе вметнеме абзац со следнава верстка:

products/NewProductForm.jsx<p>
  <label htmlFor="prodSeller">Продавач:</label>
  <select id="prodSeller" value={sellerId} onChange={onSellerChanged}>
    <option value=""></option>
    {sellersList}
  </select>
</p>

Сега можеме да ја пуштиме нашата апликација. Во формата за додавање се појави листа со продавачи. Да ја испробаме формата со податоци, да избереме еден од нив и да кликнеме на копчето за зачувување. Сега, ако погледнеме во Redux DevTools, ние ќе ги видиме промените - во новододадениот производ кај нас се појави својство seller со id на избраниот продавач како вредност. Исто така во јазичето State сега се прикажуваат два слајса products и sellers.