Редуктор и action в Redux

В предишния урок завършихме формата за добавяне на продукт и я показахме на главната страница. Но засега добавените данни не се запазват, с други думи новият продукт не се добавя към съществуващите в store. Нека оправим това.

Като начало в нашето приложение с продукти ще отворим файла productsSlice.jsx и ще напишем в свойството reducer за createSlice функцията productAdded, която ще се занимава с добавянето на продукт в store на базата на предадените й текущо състояние и екшън. Трябва да отбележим, че тук ни се предава не цялото state, а само тази част от него, която отговаря за продуктите (сегментът products знае само за нея). Обектът с новия продукт ще се намира в свойството payload на обекта action, който ще се генерира от обработващата функция при натискане на бутона за запазване във формата. В резултат редукторът productAdded ще изглежда в кода на createSlice така:

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

А какво става с action? Още в началото на учебника споменахме, че action - това е някакво събитие, представено като обект, описващо това, което се е случило в приложението. Говорихме и за това, че може да се използва функция action creator, която ще ни създава такъв обект, например така:

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

Добрата новина е, че не трябва да правим нищо, a това ще бъде направено за нас от функцията createSlice, която използваме. Щом написахме reducer, тя автоматично ще създаде за нас action creator със същото име. На нас остава само да експортираме получения action creator за по-нататъшно използване в компонентите. Нека направим това в края на файла преди експорта на редуктора, ето така:

export const { productAdded } = productsSlice.actions
export default productsSlice.reducer

Отворете вашето приложение със студенти, след това файла studentsSlice.jsx, допишете стойността на полето reducer за createSlice, както е показано в урока.

Добавете в края на файла studentsSlice.jsx експорт на получената функция action creator.