A Redux és RTK telepítése React alkalmazásba

Ezen az órán telepítjük az alkalmazásunkba a React-Redux csomagot, amely lehetővé teszi a React komponensek számára, hogy együttműködjenek a Redux-szal, valamint a Redux Toolkit eszközt (röviden RTK).

Nyissuk meg a projektünket, és gépeljük be a terminálba a következő parancsot:

npm install @reduxjs/toolkit react-redux

Most létre kell hoznunk egy store-t (tárolót), amely az alkalmazásunk globális állapotát fogja tárolni. Először a src mappában létrehozunk egy app mappát, és abban egy store.js fájlt. Ezután ebbe a fájlba importálnunk kell a configureStore-ot az RTK-ból:

import { configureStore } from '@reduxjs/toolkit'

Ezután hozzunk létre egy üres store-t, és adjunk át legalább egy reducert:

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

Ahhoz, hogy a React komponenseink képesek legyenek dolgozni a store-val, a következőket tesszük. Menjünk a main.jsx fájlunkba, amely már tartalmaz kódot:

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

Az importokhoz adjuk hozzá a sorokat az előző lépésben létrehozott store-ral és a Provider komponenssel:

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

Ezután becsomagoljuk a fő App komponensünket a Provider-be, és prop-ként átadjuk neki a store-t:

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

És végül, a fő React komponensben, a App-ben helyezzük el a következő kódot:

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

export default App

Indítsuk újra a projektünket, és látni fogjuk a böngésző ablakában: 'This is my first Redux app!'. Az érvényes reducer hiányára vonatkozó figyelmeztetésre egyelőre ne figyeljünk. Sikeresen megcsináltad, gratulálok :).

Telepítse az alkalmazásába a Redux-ot és az RTK-t, ahogyan azt a leckében leírjuk. Győződjön meg róla, hogy az alkalmazása működik.