Рэдьюсер і action у Redux

На мінулым уроке мы скончылі форму для дадання прадукту і вывялі яе на галоўнай старонцы. Але пакуль дададзеныя даныя не захоўваюцца, іншымі словамі новы прадукт не дадаецца да існуючых у store. Давайце гэта выправім.

Для пачатку ў нашым дадатку з прадуктамі мы адкрыем файл productsSlice.jsx і напішам у ўласцівасці reducer для createSlice функцыю productAdded, якая будзе займацца даданнем прадукту ў store на аснове перададзеных ёй бягучага стэйту і экшна. Трэба адзначыць, што тут нам перадаецца не ўвесь state, а толькі тая яго частка, якая адказвае за прадукты (слайс products ведае толькі пра яе). Аб'ект з новым прадуктам будзе знаходзіцца ва ўласцівасці payload аб'екта action, які будзе генеравацца апрацоўшчыкам пры націсканні кнопкі захавання ў форме. У выніку рэдьюсер productAdded будзе выглядаць у кодзе createSlice так:

products/productsSlice.jsconst productsSlice = createSlice({
  name: 'products',
  initialState,
  reducers: {
    productAdded(state, action) {
      state.push(action.payload)
    },
  },
})

А як наконт action? У самым пачатку дапаможніка мы згадвалі пра тое, што action - гэта некаторая падзея, прадстаўленая ў выглядзе аб'екта, якая апісвае тое, што адбылося ў дадатку. Гаварылі мы і пра тое, што можна выкарыстоўваць функцыю action creator, якая будзе нам ствараць такі аб'ект, напрыклад так:

jsxconst addProduct = newProduct => {
  return {
    type: 'products/productAdded',
    payload: newProduct
  }
}

Добрая навіна ў тым, што нам не трэба нічога рабіць, а гэта за нас зробіць функцыя createSlice, якую мы выкарыстоўваем. Як толькі мы напісалі reducer, яна аўтаматычна стварыць за нас action creator з такім жа імем. Нам толькі застаецца экспартаваць атрыманы action creator для далейшага прымянення ў кампанентах. Зробім гэта ў канцы файла перад экспартам рэдьюсера, вось так:

products/productsSlice.jsexport const { productAdded } = productsSlice.actions
export default productsSlice.reducer