Installazione e Configurazione di Redux Toolkit

Per iniziare a utilizzare Redux Toolkit, è necessario installarlo insieme ai binding per React.

Esegui il seguente comando nel tuo progetto:

npm install @reduxjs/toolkit react-redux

Questo comando installa tutto il necessario per creare uno store e collegarlo alla tua applicazione React.

Configurazione dello Store

Crea un nuovo file per lo store. Una posizione comune è:

src/store/store.js

All'interno di questo file, crea lo store utilizzando configureStore:

import { configureStore } from '@reduxjs/toolkit';

export const store = configureStore({
  reducer: {}
});

A questo punto, lo store è vuoto. Aggiungerai i reducer nei prossimi capitoli.

Collegamento di Redux a React

Per rendere lo store disponibile nell'applicazione, avvolgi il componente root con Provider.

Apri il file di ingresso principale (ad esempio main.jsx o index.js) e aggiornalo come segue:

import React from 'react';
import ReactDOM from 'react-dom/client';
import { Provider } from 'react-redux';
import { store } from './store/store';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(
  <Provider store={store}>
    <App />
  </Provider>
);

Ora lo store Redux è disponibile in ogni componente.