Редјусер и акција у Redux-у

На прошлом уроку мы закончили форму за додавање производа и приказали је на главној страници. Али за сада додати подаци се не чувају, другим речима нови производ се не додаје постојећим у store-у. Хајде да то исправимо.

За почетак у нашој апликацији са производима отворићемо фајл productsSlice.jsx и написаћемо у својству reducer за createSlice функцију productAdded, која ће се бавити додавањем производа у store на основу прослеђеног јој тренутног state-а и акције. Треба напоменути да нам овде није прослеђен цео state, већ само његов део који одговара за производе (слајс products зна само о њему). Објекат са новим производом биће у својству payload објекта action, који ће бити генерисан обрађивачем при клику на дугме за чување у форми. Као резултат, редуцер productAdded ће изгледати у коду createSlice овако:

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

А шта је са акцијом? На самом почетку уџбеника споменули смо да је акција неки догађај, представљен у виду објекта, који описује оно што се десило у апликацији. Говорили смо и о томе да можемо користити функцију креатор акције која ће нам креирати такав објекат, на пример овако:

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

Добра вест је да нам не треба ништа радити, а то ће за нас урадити функција createSlice, коју користимо. Чим напишемо reducer, она ће аутоматски креирати за нас креатор акције са истим именом. Нама само преостаје да извеземо добијени креатор акције за даљу употребу у компонентама. Урадимо то на крају фајла пре извоза редуцера, овако:

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