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:

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

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

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

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

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

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

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

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

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

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

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