Instalacja Redux i RTK w aplikacji React

Na tym zajęciu zainstalujemy w naszą aplikację pakiet React-Redux, umożliwiający współpracę komponentów React z Redux oraz narzędzie Redux Toolkit (w skrócie RTK).

Otwórzmy nasz projekt i wpiszmy w terminalu następujące polecenie:

npm install @reduxjs/toolkit react-redux

Teraz musimy utworzyć magazyn store, w którym będzie przechowywany globalny stan naszej aplikacji. Na początek w folderze src utworzymy folder app, a w nim plik store.js. Następnie do tego pliku musimy zaimportować configureStore z RTK:

import { configureStore } from '@reduxjs/toolkit'

Następnie utwórzmy pusty store i przekażmy przynajmniej jeden reducer:

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

Aby nasze komponenty React mogły współpracować ze store, zrobimy następujące. Wejdźmy do naszego pliku main.jsx, w którym mamy już zawarty 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>,
)

W importach dodajmy linie z utworzonym w poprzednim kroku store oraz komponentem Provider:

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

Następnie otulmy nasz główny komponent App w Provider, a jako props przekażmy mu store:

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

I wreszcie, w głównym komponencie React App umieśćmy następujący kod:

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

export default App

Uruchamiamy ponownie nasz projekt i widzimy w oknie przeglądarki: 'This is my first Redux app!'. Na ostrzeżenie o braku ważnego reducera na razie nie zwracamy uwagi. Wszystko ci się udało, gratuluję :).

Zainstaluj w swojej aplikacji Redux i RTK, jak opisano w lekcji. Upewnij się, że twoja aplikacja działa.