Instalacija Redux-a i RTK-a u React aplikaciju

Na ovoj lekciji ćemo instalirati u našu aplikaciju paket React-Redux, koji omogućava React komponentama da rade u sprezi sa Redux-om i alat Redux Toolkit (skraćeno RTK).

Otvorimo naš projekat i ukucajmo u terminalu sledeću komandu:

npm install @reduxjs/toolkit react-redux

Sada nam je potrebno da napravimo store (skladište), u kom će se čuvati globalno stanje naše aplikacije. Za početak u folderu src napravićemo folder app, a u njemu fajl store.js. Zatim u ovaj fajl treba da importujemo configureStore iz RTK-a:

import { configureStore } from '@reduxjs/toolkit'

Zatim kreirajmo prazan store i prosledimo makar jedan reducer:

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

Da bi naše React komponente mogle da rade sa store-om, uradićemo sledeće. Idemo u naš fajl main.jsx, u kojem se već nalazi 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>,
)

U import dodajmo linije sa kreiranim na prethodnom koraku store i komponentom Provider:

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

Zatim obmotimo naš glavni komponent App u Provider, a kao props prosledimo mu store:

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

I, konačno, u glavnoj React komponenti App postavimo sledeći kod:

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

export default App

Ponovo pokrenimo naš projekat i vidimo u prozoru pregledača: 'This is my first Redux app!'. Na upozorenje o nedostatku validnog reducera za sada ne obraćamo pažnju. Sve vam je uspelo, čestitam :).

Instalirajte u vašoj aplikaciji Redux i RTK, kao što je opisano u lekciji. Uverite se da vaša aplikacija radi.