Menambah Slice dalam Redux

Kami telah menyediakan alat-alat asas untuk membuat aplikasi Redux kami, sekarang kami boleh beralih kepada pelaksanaan komponen-komponennya.

Dalam sesi ini, kita akan mulakan dengan konsep slice (slices). Aplikasi Redux mempunyai satu keadaan global yang disimpan dalam store. Keadaan ini dipecahkan kepada slice. Secara faktanya, slice ialah sebahagian kecil storan yang mengandungi keadaan asal, logik reducer dan actions untuk bahagian tertentu aplikasi.

Aplikasi kami akan melibatkan produk, oleh itu slice pertama yang akan kami buat, akan mengandungi maklumat tentang produk. Juga semasa mencipta slice perlu menambah reducer yang tahu bagaimana untuk memproses maklumat ini.

Mari kita pergi ke folder src dan buat folder parts, dan kemudian di dalamnya folder products - ke sini kami akan meletakkan semua fail dengan kod yang berkaitan dengan produk. Dalam folder products kami akan mencipta fail productsSlice.js, dan kemudian import ke dalamnya dari RTK fungsi createSlice, dengan bantuan yang kami akan mencipta slice:

import { createSlice } from '@reduxjs/toolkit'

Sekarang mari kita buat slice untuk produk dan namakannya 'products'. Untuk property reducers kami akan tinggalkan buat masa ini kurungan keriting kosong:

const productsSlice = createSlice({
	name: 'products',
	initialState,
	reducers: {}
})

Kami juga perlu menentukan initialState - keadaan awal slice yang akan dimuatkan pada pelancaran pertama aplikasi. Mari tulisnya serta-merta selepas import dan sebelum mencipta slice. Biarkan ia menjadi array daripada beberapa objek yang mengandungi data produk. Tentukan untuk setiap produk id, tajuk, keterangan, harga dan kuantiti:

const initialState = [
	{
		id: '1',
		title: 'Product1',
		desc: 'This is an amazing product',
		price: '300',
		amount: '30',
	},
	{
		id: '2',
		title: 'Product2',
		desc: 'This is a nice product',
		price: '700',
		amount: '12',
	},
]

Pada akhir kod fail, kami akan mengambil dari hasil kerja fungsi createSlice reducer yang dihasilkannya dan export. Ia akan berguna untuk kami dalam fail-fail lain aplikasi:

export default productsSlice.reducer

Buka aplikasi anda untuk pelajar. Buat dalamnya fail studentsSlice.js, seperti yang diterangkan dalam pelajaran. Buat di dalamnya dengan bantuan createSlice slice students. Sebagai nilai awal slice, biarkan anda mempunyai array daripada beberapa objek yang mengandungi data pelajar.

Untuk setiap pelajar buatkan medan: id, nama, nama keluarga, umur dan pengkhususan.

Pada akhir fail studentsSlice.js export reducer yang diperoleh, seperti yang diterangkan dalam pelajaran.