Instalasi Redux dan RTK di Aplikasi React

Pada sesi ini, kita akan menginstal paket React-Redux ke dalam aplikasi kita, yang memungkinkan komponen React bekerja bersama dengan Redux dan alat Redux Toolkit (disingkat RTK).

Buka proyek kita dan ketik di terminal perintah berikut:

npm install @reduxjs/toolkit react-redux

Sekarang kita perlu membuat store (penyimpanan), yang akan menyimpan state global aplikasi kita. Pertama, di folder src kita akan buat folder app, dan di dalamnya file store.js. Kemudian di file ini kita perlu mengimpor configureStore dari RTK:

import { configureStore } from '@reduxjs/toolkit'

Selanjutnya, buat store kosong dan berikan setidaknya satu reducer:

export default configureStore({
	reducer: {}
});

Agar komponen React kita dapat bekerja dengan store, kita akan melakukan hal berikut. Masuk ke file main.jsx kita, yang di dalamnya sudah berisi kode:

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App.jsx'
import './index.css'

ReactDOM.createRoot(document.getElementById('root')).render(
	<React.StrictMode>
		<App />
	</React.StrictMode>,
)

Di impor, tambahkan baris dengan store yang dibuat pada langkah sebelumnya dan komponen Provider:

import store from './app/store'
import { Provider } from 'react-redux'

Kemudian, bungkus komponen utama App kita ke dalam Provider, dan berikan kepadanya store sebagai props:

<React.StrictMode>
	<Provider store={store}>
		<App />
	</Provider>
</React.StrictMode>

Dan, akhirnya, di komponen React utama App, tempatkan kode berikut:

function App() {
	return <h2>This is my first Redux app!</h2>
}

export default App

Jalankan kembali proyek kita dan lihat di jendela browser: 'This is my first Redux app!'. Untuk peringatan tentang tidak adanya reducer yang valid, abaikan untuk sementara. Anda berhasil, selamat :).

Instal Redux dan RTK di aplikasi Anda, seperti yang dijelaskan dalam pelajaran. Pastikan aplikasi Anda berjalan.