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:

terminalnpm 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:

app/store.jsimport { configureStore } from '@reduxjs/toolkit'

Zatim kreirajmo prazan store i prosledimo makar jedan reducer:

app/store.jsexport 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:

main.jsximport 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:

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

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

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

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

App.jsxfunction 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 :).