Instalace Redux a RTK v React aplikaci

V této lekci nainstalujeme do naší aplikace balíček React-Redux, který umožňuje React komponentám pracovat ve spojení s Reduxem a nástroj Redux Toolkit (zkráceně RTK).

Otevřeme náš projekt a v terminálu zadáme následující příkaz:

npm install @reduxjs/toolkit react-redux

Nyní potřebujeme vytvořit úložiště store, ve kterém bude uložen globální stav naší aplikace. Nejprve v složce src vytvoříme složku app, a v ní soubor store.js. Poté do tohoto souboru potřebujeme importovat configureStore z RTK:

import { configureStore } from '@reduxjs/toolkit'

Dále vytvoříme prázdný store a předáme alespoň jeden reducer:

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

Aby naše React komponenty mohly pracovat se store, uděláme následující. Přejdeme do našeho souboru main.jsx, ve kterém již máme 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 přidáme řádky s vytvořeným store z předchozího kroku store a komponentou Provider:

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

Poté obalíme naši hlavní komponentu App do Provider a jako props jí předáme store:

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

A nakonec v hlavní React komponentě App umístíme následující kód:

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

export default App

Znovu spustíme náš projekt a uvidíme v okně prohlížeče: 'This is my first Redux app!'. Na varování o absenci platného reduceru prozatím nebereme ohled. Vše se vám povedlo, gratuluji :).

Nainstalujte ve vaší aplikaci Redux a RTK, jak je popsáno v lekci. Ujistěte se, že vaše aplikace funguje.