Instalimi i Redux dhe RTK në aplikacionin React

Në këtë sesion do të instalojmë në aplikacionin tonë paketën React-Redux, e cila lejon komponentët React të punojnë në lidhje me Redux dhe mjetin Redux Toolkit (shkurtuar RTK).

Le të hapim projektin tonë dhe të shkruajmë në terminal komandën e mëposhtme:

npm install @reduxjs/toolkit react-redux

Tani duhet të krijojmë një depo (store) ku do të ruhet gjendja globale e aplikacionit tonë. Për fillim, në dosjen src do të krijojmë një dosje app, dhe brenda saj skedarin store.js. Pastaj në këtë skedar duhet të importojmë configureStore nga RTK:

import { configureStore } from '@reduxjs/toolkit'

Më pas, le të krijojmë një store bosh dhe t'i kalojmë të paktën një reducer:

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

Që komponentët tanë React të mund të punojnë me store, do të bëjmë sa vijon. Le të shkojmë në skedarin tonë main.jsx, ku tashmë kemi kodin:

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

Në importet, le të shtojmë rreshtat me store të krijuar në hapin e mëparshëm dhe komponentin Provider:

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

Pastaj, le të mbështjellim komponentin tonë kryesor App në Provider, dhe si prop t'i kalojmë store:

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

Dhe, së fundi, në komponentin kryesor React App, le të vendosim kodin e mëposhtëm:

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

export default App

Le të nisim përsëri projektin tonë dhe të shohim në dritaren e shfletuesit: 'This is my first Redux app!'. Për momentin, mos i kushtoni vëmendje paralajmërimit për mungesën e një reducer-i valid. Ju keni arritur, urime :).

Instaloni Redux dhe RTK në aplikacionin tuaj, siç përshkruhet në mësim. Sigurohuni që aplikacioni juaj të funksionojë.