Pemasangan Redux dan RTK dalam Aplikasi React

Dalam sesi ini, kita akan memasang pakej React-Redux ke dalam aplikasi kita, yang membolehkan komponen React berfungsi bersama Redux dan alat Redux Toolkit (disingkatkan RTK).

Buka projek kita dan taip dalam terminal perintah berikut:

npm install @reduxjs/toolkit react-redux

Sekarang kita perlu membuat stor store, di mana keadaan global aplikasi kita akan disimpan. Untuk permulaan, dalam folder src kita akan buat folder app, dan di dalamnya fail store.js. Kemudian dalam fail ini kita perlu import configureStore dari RTK:

import { configureStore } from '@reduxjs/toolkit'

Seterusnya, buat store kosong dan hantar sekurang-kurangnya satu reducer:

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

Untuk membolehkan komponen React kita berfungsi dengan store, kita akan lakukan berikut. Masuk ke fail main.jsx kita, di mana kita sudah mempunyai kod:

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

Dalam import, tambahkan barisan dengan store yang dibuat pada langkah sebelumnya dan komponen Provider:

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

Kemudian bungkus komponen utama kita App dalam Provider, dan hantarkannya sebagai prop store:

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

Dan akhirnya, dalam komponen React utama App letakkan kod berikut:

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

export default App

Jalankan semula projek kita dan lihat dalam tetingkap pelayar: 'This is my first Redux app!'. Untuk amaran mengenai ketiadaan reducer yang sah, buat masa ini jangan hiraukan. Anda berjaya, tahniah :).

Pasang Redux dan RTK dalam aplikasi anda, seperti yang diterangkan dalam pelajaran. Pastikan aplikasi anda berfungsi.