Menambah Reducer kepada Aplikasi Redux

Dalam pelajaran lepas, kami mencipta komponen UserReaction supaya setiap produk juga mempunyai reaksi pengguna. Sekarang kita perlu menulis reducer yang akan mengendalikan pembilang reaksi apabila pengguna mengklik tompok reaksi tertentu.

Mari buka aplikasi produk kami, dan dalamnya fail productsSlice.js yang mengandungi semua reducer. Sekarang dalam sifat reducers kami akan cipta satu lagi reducer reactionClicked (kami boleh letakkannya di hadapan - sebelum productAdded, walaupun tidak mengapa). Seperti biasa, kami akan berikan kepadanya parameter state dan action:

reactionClicked(state, action) {},

Sekarang di dalam kurungan kerinting, yang kami tinggalkan kosong pada langkah sebelumnya, kami akan tulis kod untuknya. Pertama, kami akan ekstrak id produk dari payload objek action dan nama reaksi:

const { productId, reaction } = action.payload

Kemudian dari state yang diberikan, dapatkan produk yang diperlukan:

const currentProduct = state.find(product => product.id === productId)

Dan jika produk tersebut wujud, tambahkan nilai reaksi yang diberikan sebanyak 1:

if (currentProduct) {
	currentProduct.reactions[reaction]++
}

Itu sahaja, kod kami untuk reactionClicked sudah siap:

reactionClicked(state, action) {
	const { productId, reaction } = action.payload
	const currentProduct = state.find(product => product.id === productId)
	if (currentProduct) {
		currentProduct.reactions[reaction]++
	}
},

Mari pada akhir fail, tambahkan eksport action creator yang diperoleh:

export const {
	reactionClicked,
	productAdded,
	productUpdated
} = productsSlice.actions

Terdapat dua perkara penting yang perlu diperhatikan di sini. Seperti yang anda ingat dari pelajaran sebelumnya - mengemas kini nilai secara langsung dalam kod reducer adalah tidak dibenarkan (lihat baris ini: reactions[reaction]++), tetapi kami boleh melakukannya kerana kami melakukannya dalam createSlice, yang menggunakan pustaka Immer. Ia akan memastikan untuk menukar kod kami kepada kemas kini nilai yang "selamat". Ini membolehkan kami menulis perkara kompleks dengan cara yang lebih mudah.

Seterusnya, yang perlu diingat - objek action harus mengandungi maklumat minimum yang mungkin - hanya untuk menunjukkan apa yang berlaku. Jangan lakukan sebarang pengiraan di dalamnya. Semua pengiraan untuk mengemas kini state harus dilakukan dalam reducer, di sini anda boleh menulis sebarang logik yang diperlukan untuk melakukannya.

Buka aplikasi pelajar anda dan dalam fail studentsSlice.js tambahkan satu lagi reducer voteClicked dalam medan reducers, seperti yang ditunjukkan dalam pelajaran. Tulis kod untuknya. Tugas reducer anda - apabila diklik, tambahkan nilai vote (atau undi), yang diklik, untuk pelajar tersebut, sebanyak 1.

Pada akhir fail, jangan lupa untuk mengeksport action creator voteClicked yang diperoleh.