Reducer Tambahan di Redux

Mari buka aplikasi produk kita, dan di dalamnya file productsSlice.js. Mungkin Anda menyadari bahwa kita membuat thunk fetchProducts sebagai fungsi terpisah? Kita melakukannya seperti itu, karena createSlice tidak mendukung pendefinisian thunks. Lalu bagaimana dalam kasus ini kita membuat reducer slice products merespons aksi-aksi yang didefinisikan di luar products? Bukankah kita justru perlu menangani aksi-aksi yang dikirim oleh thunk fetchProducts.

Untuk kasus seperti ini, createSlice memiliki properti extraReducers, yang memungkinkan penambahan reducer tambahan, yang pada gilirannya akan menangani aksi-aksi yang didefinisikan bukan di dalam slice ini.

Sekarang mari dalam tubuh fungsi createSlice setelah properti reducers dengan semua reducer tambahkan satu metode lagi extraReducers:

extraReducers() {},

Kita harus meneruskan objek builder ke metode ini, yang memiliki metode-metode, dengan bantuan yang dapat menambahkan reducer tambahan:

extraReducers(builder) {},

Kita akan menggunakan salah satu metode builder - addCase, yang menerima parameter pertama sebagai action creator, dan parameter kedua sebagai reducer. Salah satu aksi yang akan dikirimkan oleh fetchProducts saat permintaan adalah fetchProducts.pending, yang memberi tahu kita bahwa permintaan telah dikirim. Mari dalam hal ini kita ubah status menjadi 'in progress' (sebelumnya 'idle'):

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

Sekarang mari tangani aksi yang akan dikirim dalam kasus permintaan berhasil. Di sini kita akan mengubah tidak hanya status di state menjadi 'success', tetapi juga mengambil produk ke dalam slice products dari payload aksi. Untuk mengumpulkan semua produk kita akan membutuhkan metode 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)
		})
},

Dalam kasus permintaan gagal kita akan mengubah status menjadi 'fail' dan mencatat di state pesan kesalahan:

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

Jika kita sekarang menjalankan aplikasi kita dan di menu klik 'Products', maka setelah beberapa detik (ingat tentang penundaan, yang kita atur di server?) kita akan melihat daftar produk.

Secara sama kita akan melihat perubahan di Redux DevTools. Sekarang produk kita akan muncul juga di state (lihat tab 'State'), jika Anda mengklik aksi products/fetchProducts/fulfilled. Di sana juga akan muncul status baru 'success'. Sekarang klik pada aksi products/fetchProducts/pending dan lihatlah, apa yang sekarang membedakan tab 'State'.

Satu-satunya momen tidak menyenangkan yang mungkin terjadi pada Anda (saya membicarakan ini pada pelajaran sebelumnya) - adalah duplikasi permintaan data. Akibatnya, di daftar kita bukan 8, tetapi sejumlah 16 produk dan peringatan kritis di konsol pengembang. Mari kita bahas ini pada pelajaran berikutnya.

Buka aplikasi Anda dengan siswa. Buka file studentsSlice.js di dalamnya. Di tubuh fungsi createSlice setelah properti reducers tambahkan properti extraReducers. Teruskan builder ke metode extraReducers.

Dengan metode builder.addCase tambahkan penanganan untuk aksi pending, fulfilled dan rejected, yang dikirim oleh fetchStudents saat permintaan data, seperti yang ditunjukkan dalam pelajaran.