Reducer Tambahan dalam Redux

Mari buka aplikasi produk kami, dan di dalamnya fail productsSlice.js. Mungkin anda perhatikan, kami mencipta thunk fetchProducts sebagai fungsi berasingan? Kami melakukannya sedemikian kerana createSlice tidak menyokong definisi thunks. Bagaimana dalam kes ini kami boleh memaksa reducer slice products untuk bertindak balas terhadap aksi yang ditakrifkan di luar products? Lagipun, kami perlu memproses aksi yang dihantar oleh thunk fetchProducts.

Untuk kes sedemikian, createSlice mempunyai sifat extraReducers, yang membenarkan menambah reducer tambahan, yang seterusnya akan memproses aksi yang ditakrifkan bukan dalam slice ini.

Sekarang mari dalam badan fungsi createSlice selepas sifat reducers dengan semua reducer tambah satu lagi kaedah extraReducers:

extraReducers() {},

Kami mesti menghantar objek builder kepada kaedah ini, yang mempunyai kaedah, dengan bantuan yang boleh ditambah reducer tambahan:

extraReducers(builder) {},

Kami akan menggunakan salah satu kaedah builder - addCase, yang menerima action creator sebagai parameter pertama, dan reducer sebagai kedua. Salah satu aksi yang akan dihantar oleh fetchProducts semasa permintaan ialah fetchProducts.pending, yang memberitahu kami bahawa permintaan telah dihantar. Mari dalam ini kes menukar status kepada 'in progress' (sebelum ini ia adalah 'idle'):

extraReducers(builder) {
	builder.addCase(fetchProducts.pending, (state) => {
		state.status = 'in progress'
	})
},

Sekarang mari proses aksi yang akan dihantar sekiranya permintaan berjaya. Di sini kami akan menukar bukan sahaja status dalam state kepada 'success', tetapi juga mengambil produk dalam slice products dari payload aksi. Untuk mengumpul semua produk, kami perlukan kaedah concat:

extraReducers(builder) {
	builder
		.addCase(fetchProducts.pending, (state) => {
			state.status = 'in progress'
		})
		.addCase(fetchProducts.fulfilled, (state, action) => {
			state.status = 'success'
			state.products = state.products.concat(action.payload)
		})
},

Sekiranya permintaan tidak berjaya, kami akan menukar status kepada 'fail' dan tulis dalam state mesej ralat:

.addCase(fetchProducts.rejected, (state, action) => {
	state.status = 'fail'
	state.error = action.error.message
})

Jika kami jalankan aplikasi kami sekarang dan dalam menu klik pada 'Products', maka selepas beberapa saat (ingat tentang kelewatan, yang kami tetapkan pada pelayan?) kami akan melihat senarai dengan produk.

Dengan cara yang sama kami akan melihat perubahan dalam Redux DevTools. Sekarang produk kami akan muncul dan dalam state (lihat tab 'State'), jika anda klik pada aksi products/fetchProducts/fulfilled. Status baru 'success' juga akan muncul di sana. Sekarang klik pada aksi products/fetchProducts/pending dan lihat, bagaimana tab 'State' berbeza sekarang.

Satu-satunya saat yang tidak menyenangkan yang mungkin berlaku kepada anda (saya bercakap tentang ini dalam pelajaran sebelumnya) - ini ialah penduaan permintaan data. Hasilnya, kami dalam senarai akan mendapat bukan 8, tetapi sejumlah 16 produk dan amaran kritikal dalam konsol pembangun. Mari selesaikan ini dalam pelajaran seterusnya.

Buka aplikasi pelajar anda. Buka fail studentsSlice.js di dalamnya. Dalam badan fungsi createSlice selepas sifat reducers tambah sifat extraReducers. Hantar builder kepada kaedah extraReducers.

Dengan menggunakan kaedah builder.addCase tambah pemprosesan untuk aksi pending, fulfilled dan rejected, yang dihantar oleh fetchStudents semasa permintaan data, seperti yang ditunjukkan dalam pelajaran.