Mengubah Struktur State di Redux

Tahap pertama yang akan kita implementasikan untuk interaksi aplikasi Redux kita dengan server eksternal adalah mendapatkan data yang disimpan di dalamnya saat aplikasi dijalankan. Namun sebelumnya, mari kita lakukan beberapa perubahan pada aplikasi kita.

Buka aplikasi produk kita, dan di dalamnya file productsSlice.js. Perhatikan definisi initialState. Awalnya slice kita dengan produk productsSlice adalah sebuah array, di mana terdapat objek (dalam kasus kita ada dua) dengan data produk. Pertama, karena sekarang kita akan memuatnya dari server, maka kita perlu menghapusnya dari initialState. Kedua, kita akan mengirim permintaan API ke server dan penting bagi kita untuk mengetahui statusnya. Mempertimbangkan dua hal ini, mari ubah initialState. Sekarang biarkan ini menjadi objek sederhana dengan bidang products (awalnya tidak akan ada data di sini, hanya array kosong), status dan error. Sekarang kode kita untuk initialState akan menjadi sedikit lebih pendek:

const initialState = {
	products: [],
	status: 'idle',
	error: null,
}

Sementara kita menetapkan status 'idle' (menganggur), karena awalnya kita tidak mengirimkan permintaan apa pun, tetapi secara umum status akan berubah dan dapat mengambil nilai 'loading', 'succeeded', 'failed'. Ingatlah bahwa untuk menunjukkan status, Anda dapat memilih nama-nama yang nyaman bagi Anda.

Turunkan lebih jauh ke kode. Setelah perubahan initialState, kita harus mengubah kode di mana kita bekerja dengan state ini di fungsi reducer. Mari lihat kode untuk productAdded:

state.push(action.payload)

Sekarang produk baru akan kita masukkan bukan hanya ke state untuk produk, tetapi ke propertinya state.products. Oleh karena itu, ganti baris di atas dengan:

state.products.push(action.payload)

Oleh karena itu, lakukan perubahan yang sama untuk reducer reactionClicked. Daripada:

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

Sekarang akan menjadi:

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

Gantilah sendiri state dengan state.products di kode reducer productUpdated.

Buka aplikasi Anda dengan siswa. Buka file studentsSlice.js di dalamnya. Biarkan sekarang initialState Anda memiliki tiga properti: students, status, error - ubahlah, seperti yang ditunjukkan dalam pelajaran.

Lakukan perubahan yang sesuai di bawah kode. Ganti state dengan state.students di kode untuk tiga fungsi reducer Anda.