Inštalácia Redux a RTK v React aplikácii

Na tomto cvičení nainštalujeme do našej aplikácie balík React-Redux, ktorý umožňuje React komponentám pracovať v spojení s Reduxom a nástroj Redux Toolkit (skrátene RTK).

Otvorme náš projekt a v termináli zadajte nasledujúci príkaz:

npm install @reduxjs/toolkit react-redux

Teraz musíme vytvoriť úložisko store, v ktorom bude uložené globálny stav našej aplikácie. Na začiatok v priečinku src vytvoríme priečinok app, a v ňom súbor store.js. Potom do tohto súboru musíme importovať configureStore z RTK:

import { configureStore } from '@reduxjs/toolkit'

Ďalej vytvoríme prázdny store a odovzdáme aspoň jeden reducer:

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

Aby naše React komponenty mohli pracovať so store, urobíme nasledovné. Prejdeme do nášho súboru main.jsx, v ktorom máme už obsahuje kód:

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

Do importu pridáme riadky s vytvoreným v predchádzajúcom kroku store a komponentom Provider:

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

Potom obalíme našu hlavnú komponentu App do Provider, a ako prop jej odovzdáme store:

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

A nakoniec, v hlavnej React komponente App umiestnime nasledujúci kód:

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

export default App

Spustíme znova náš projekt a uvidíme v okne prehliadača: 'This is my first Redux app!'. Na varovanie o neprítomnosti platného reducera zatiaľ nevenujeme pozornosť. Všetko sa vám podarilo, gratulujem :).

Nainštalujte vo vašej aplikácii Redux a RTK, ako je popísané v lekcii. Uistite sa, že vaša aplikácia funguje.