Summary  
This chapter covers organizing a project’s directory structure and defining the shape of data objects for state management.

General domain of usage  
Task management applications


In questa sezione, costruirai una semplice app **Task Manager**.

L'app consentirà agli utenti di:

* Creare attività;
* Contrassegnare le attività come completate;
* Eliminare le attività;
* Caricare le attività iniziali da un'API.



## Struttura del progetto

```bash
src/
  app/
    store.js
  features/
    tasks/
      tasksSlice.js
  components/
    TaskForm.jsx
    TaskList.jsx
    TaskItem.jsx
  App.jsx
  main.jsx
```



## Struttura del task

Ogni task avrà il seguente aspetto:

```javascript
{
  id: 1,
  title: 'Learn Redux Toolkit',
  completed: false
}
```

Questa struttura è semplice, ma abbastanza realistica per esercitarsi correttamente con Redux Toolkit.



Hai definito la struttura del progetto e la forma dei dati. Questo ti offre una base chiara per costruire lo stato e le funzionalità nei prossimi passaggi.

Impara a gestire lo stato complesso delle applicazioni in React utilizzando Redux Toolkit. Comprendi quando Redux è effettivamente necessario, costruisci lo stato con le slice, gestisci dati asincroni e collega tutto in un flusso prevedibile.

Comprendere perché esiste Redux Toolkit e quando diventa utile. Riconoscere come la complessità dello stato cresce nelle applicazioni reali e perché gli approcci semplici smettono di essere scalabili.

Installazione di Redux Toolkit e configurazione dello store. Collegamento di Redux a un'applicazione React e comprensione del flusso dei dati attraverso il sistema.

Definire lo stato utilizzando gli slice e organizzare la logica in modo chiaro. Creare reducer, utilizzare le azioni generate e mantenere lo stato gestibile con la crescita dell'applicazione.

Leggere i dati dallo store utilizzando useSelector e aggiornarli con useDispatch. Strutturare correttamente lo stato ed evitare errori comuni durante la gestione di dati condivisi.

Recupero dei dati dalle API utilizzando createAsyncThunk. Gestione degli stati di caricamento ed errore e mantenimento della sincronizzazione dell'interfaccia utente con gli aggiornamenti asincroni.

Suddividere lo stato in più slice e organizzare i file per funzionalità. Combinare i reducer in modo ordinato e mantenere una struttura chiara man mano che l'applicazione cresce.

Costruisci un'applicazione completa utilizzando Redux Toolkit. Implementa funzionalità CRUD, gestisci dati asincroni e migliora l'esperienza utente con stati di caricamento ed errore.

Configurazione del Progetto e Struttura dei Dati

Struttura del progetto

Struttura del task