Menambahkan Slice ke Redux

Kami telah menyiapkan alat-alat utama untuk membuat aplikasi Redux kami, sekarang kita dapat beralih langsung ke implementasi komponen-komponennya.

Pada pelajaran ini kita akan mulai dengan konsep slice (slices). Aplikasi Redux memiliki satu state global yang disimpan dalam store. State ini dibagi menjadi beberapa slice. Pada dasarnya, slice adalah potongan dari store yang berisi state awal, logika reducer, dan action untuk bagian tertentu dari aplikasi.

Dalam aplikasi kita akan terdapat produk, oleh karena itu slice pertama yang akan kita buat, akan berisi informasi tentang produk. Juga saat membuat slice perlu ditambahkan reducer yang tahu bagaimana cara memproses informasi ini.

Mari masuk ke folder src dan buat folder parts, lalu di dalamnya buat folder products - ke sini kita akan menaruh semua file kode yang berkaitan dengan produk. Di folder products kita akan buat file productsSlice.js, lalu impor dari RTK fungsi createSlice, dengan menggunakan fungsi inilah kita akan membuat slice:

import { createSlice } from '@reduxjs/toolkit'

Sekarang mari buat slice untuk produk dan beri nama 'products'. Untuk properti reducers kita akan biarkan kurung kurawal kosong untuk sementara:

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

Kita juga perlu mendefinisikan initialState - keadaan awal slice state yang akan dimuat saat pertama kali aplikasi dijalankan. Mari tuliskan segera setelah impor dan sebelum membuat slice. Biarlah ini berupa array dari beberapa objek, yang berisi data produk. Tentukan untuk setiap produk id, judul, deskripsi, harga, dan jumlah:

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',
	},
]

Di akhir kode file, kita akan mengambil reducer yang dihasilkan oleh fungsi createSlice dan mengekspornya. Ini akan berguna bagi kita di file lain dalam aplikasi:

export default productsSlice.reducer

Buka aplikasi Anda untuk mahasiswa. Buat di dalamnya file studentsSlice.js, seperti yang dijelaskan dalam pelajaran. Buat di dalamnya dengan menggunakan createSlice slice students. Sebagai nilai awal slice, biarlah Anda memiliki array dari beberapa objek yang berisi data mahasiswa.

Untuk setiap mahasiswa buat field: id, nama depan, nama belakang, usia, dan spesialisasi.

Di akhir file studentsSlice.js ekspor reducer yang didapat, seperti yang dijelaskan dalam pelajaran.