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:

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

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

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

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

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

Do importu přidáme řádky s vytvořeným store z předchozího kroku store a komponentou Provider:

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

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

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

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