Reducer dan Action dalam Redux

Dalam pelajaran lepas, kita telah menyelesaikan borang untuk menambah produk dan memaparkannya pada halaman utama. Tetapi buat masa ini, data yang ditambah tidak disimpan, dalam erti kata lain produk baharu tidak ditambah kepada yang sedia ada dalam store. Mari kita betulkan ini.

Sebagai permulaan, dalam aplikasi produk kami kita akan buka fail productsSlice.jsx dan tulis dalam property reducer untuk createSlice fungsi productAdded, yang akan mengendalikan penambahan produk ke dalam store berdasarkan state semasa dan action yang diterimanya. Perlu diingatkan, di sini kita tidak menerima keseluruhan state, hanya bahagian state yang bertanggungjawab untuk produk (slice products hanya tahu tentang bahagian itu). Objek dengan produk baharu akan berada dalam property payload objek action, yang akan dijana oleh pemproses (handler) apabila butang simpan ditekan dalam borang. Hasilnya, reducer productAdded akan kelihatan dalam kod createSlice seperti ini:

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

Bagaimana pula dengan action? Pada permulaan tutorial kami ada menyebut bahawa action ialah suatu peristiwa, yang diwakili sebagai objek, yang menerangkan apa yang berlaku dalam aplikasi. Kami juga pernah bercakap tentang menggunakan fungsi action creator, yang akan mencipta objek sedemikian untuk kami, contohnya seperti ini:

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

Berita baiknya ialah kami tidak perlu buat apa-apa, kerana fungsi createSlice akan melakukannya untuk kami. Sebaik sahaja kami menulis reducer, ia secara automatik akan mencipta action creator dengan nama yang sama untuk kami. Kami hanya perlu mengeksport action creator yang diperoleh untuk penggunaan seterusnya dalam komponen. Mari lakukan ini di akhir fail sebelum mengeksport reducer, seperti ini:

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

Buka aplikasi pelajar anda, kemudian buka fail studentsSlice.jsx, tambah nilai medan reducer untuk createSlice, seperti yang ditunjukkan dalam pelajaran.

Tambah pada akhir fail studentsSlice.jsx eksport fungsi action creator yang diperoleh.