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


I denne delen skal du bygge en enkel **Task Manager**-app.

Appen vil la brukere:

* Opprette oppgaver;
* Markere oppgaver som fullført;
* Slette oppgaver;
* Laste inn innledende oppgaver fra et API.



## Prosjektstruktur

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



## Oppgavestruktur

Hver oppgave vil se slik ut:

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

Denne strukturen er enkel, men realistisk nok til å øve på Redux Toolkit på en god måte.



Du har definert strukturen til prosjektet og formen på dataene. Dette gir et tydelig grunnlag for å bygge tilstand og funksjoner i de neste stegene.

Lær hvordan du håndterer kompleks applikasjonstilstand i React ved hjelp av Redux Toolkit. Forstå når Redux faktisk er nødvendig, bygg tilstand med slices, håndter asynkrone data, og koble alt sammen i et forutsigbart flyt.

Forstå hvorfor Redux Toolkit eksisterer og når det blir nyttig. Gjenkjenne hvordan kompleksiteten i tilstand øker i reelle applikasjoner og hvorfor enkle tilnærminger slutter å skalere.

Installer Redux Toolkit og sett opp store. Koble Redux til en React-applikasjon og forstå hvordan data flyter gjennom systemet.

Definer tilstand ved hjelp av slices og organiser logikken tydelig. Opprett reducers, bruk genererte actions, og hold tilstanden håndterbar etter hvert som applikasjonen vokser.

Les data fra store ved hjelp av useSelector og oppdater den med useDispatch. Strukturer state korrekt og unngå vanlige feil ved arbeid med delt data.

Hent data fra API-er ved hjelp av createAsyncThunk. Håndter lasting og feilmeldinger, og hold brukergrensesnittet synkronisert med asynkrone oppdateringer.

Del opp tilstanden i flere slices og organiser filer etter funksjon. Kombiner reducers på en ryddig måte og oppretthold en klar struktur etter hvert som applikasjonen vokser.

Bygg en komplett applikasjon med Redux Toolkit. Implementer CRUD-funksjoner, håndter asynkrone data, og forbedre brukeropplevelsen med lasting- og feilmeldinger.

Prosjektoppsett og Datastruktur

Prosjektstruktur

Oppgavestruktur