Installazione di Redux e RTK in un'applicazione React

In questa lezione installeremo nel nostro applicazione il pacchetto React-Redux, che permette ai componenti React di lavorare in combinazione con Redux e lo strumento Redux Toolkit (abbreviato RTK).

Apriamo il nostro progetto e digitiamo nel terminale il seguente comando:

npm install @reduxjs/toolkit react-redux

Ora dobbiamo creare lo store, in cui verrà memorizzato lo stato globale della nostra applicazione. Per iniziare, nella cartella src creeremo una cartella app, e al suo interno il file store.js. Poi in questo file dobbiamo importare configureStore da RTK:

import { configureStore } from '@reduxjs/toolkit'

Successivamente, creiamo uno store vuoto e passiamogli almeno un reducer:

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

Affinché i nostri componenti React possano lavorare con lo store, faremo quanto segue. Andiamo nel nostro file main.jsx, in cui è già presente il codice:

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

Nell'import, aggiungiamo le righe con lo store creato nel passaggio precedente e il componente Provider:

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

Poi, avvolgiamo il nostro componente principale App in Provider, e passiamogli come prop store:

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

E, infine, nel componente React principale App posizioniamo il seguente codice:

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

export default App

Riavviamo il nostro progetto e vediamo nella finestra del browser: 'This is my first Redux app!'. Per ora, non prestiamo attenzione all'avviso sull'assenza di un reducer valido. Ce l'hai fatta, congratulazioni :).

Installa nella tua applicazione Redux e RTK, come descritto nella lezione. Assicurati che la tua applicazione funzioni.