Mengubah Struktur State dalam Redux

Peringkat pertama yang akan kami laksanakan untuk interaksi aplikasi Redux kami dengan mana-mana pelayan luar - ialah mendapatkan data yang disimpan di atasnya apabila aplikasi dilancarkan. Tetapi sebelum itu, mari kita buat beberapa perubahan dalam aplikasi kami.

Buka aplikasi produk kami, dan di dalamnya fail productsSlice.js. Perhatikan takrifan initialState. Pada asalnya, slice kami dengan produk productsSlice - ialah array, di mana terdapat objek (dalam kes kami terdapat dua) dengan data produk. Pertama, kerana sekarang kami akan memuatturunnya dari pelayan, maka kami perlu mengeluarkannya dari initialState. Kedua, kami akan menghantar permintaan API ke pelayan dan adalah penting untuk kami mengetahui statusnya. Mengambil kira dua perkara ini, mari kita ubah suai initialState. Biarkan sekarang ini menjadi objek dengan medan products (pada asalnya tidak akan ada sebarang data di sini, hanya array kosong), status dan error. Sekarang kod kami untuk initialState akan menjadi lebih pendek sedikit:

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

Buat masa ini kami menetapkan status 'idle' (keadaan rehat), kerana pada mulanya kami tidak menghantar sebarang permintaan, dan secara amnya ia akan berubah dan boleh menerima nilai 'loading', 'succeeded', 'failed'. Ingat bahawa untuk menandakan status anda boleh memilih nama-nama yang sesuai untuk anda.

Turun lebih rendah mengikut kod. Selepas perubahan initialState, kami perlu menukar kod, di mana kami bekerja dengan state ini dalam fungsi reducer. Mari lihat kod untuk productAdded:

state.push(action.payload)

Sekarang produk baru akan kami letakkan bukan hanya dalam state untuk produk, tetapi dalam propertynya state.products. Oleh itu, gantikan baris di atas dengan:

state.products.push(action.payload)

Oleh 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)

Gantikan sendiri state dengan state.products dalam kod reducer productUpdated.

Buka aplikasi pelajar anda. Buka fail studentsSlice.js di dalamnya. Biarkan sekarang initialState anda mempunyai tiga property: students, status, error - ubah suainya, seperti yang ditunjukkan dalam pelajaran.

Lakukan perubahan yang sepadan di bawah mengikut kod. Gantikan state dengan state.students dalam kod untuk tiga fungsi reducer anda.