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


Tässä osiossa rakennetaan yksinkertainen **Tehtävienhallinta**-sovellus.

Sovelluksen avulla käyttäjät voivat:

* Luoda tehtäviä;
* Merkitä tehtäviä suoritetuiksi;
* Poistaa tehtäviä;
* Ladata alkuperäiset tehtävät API:sta.



## Projektin rakenne

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



## Tehtävän rakenne

Jokainen tehtävä näyttää tältä:

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

Tämä rakenne on yksinkertainen, mutta riittävän realistinen Redux Toolkitiin tutustumista varten.



Projektin rakenne ja datan muoto on määritelty. Tämä antaa selkeän perustan tilan ja ominaisuuksien rakentamiselle seuraavissa vaiheissa.

Opi hallitsemaan monimutkaista sovellustilaa Reactissa käyttämällä Redux Toolkitia. Ymmärrä, milloin Reduxia todella tarvitaan, rakenna tila slicejen avulla, käsittele asynkronista dataa ja yhdistä kaikki ennustettavaksi kokonaisuudeksi.

Ymmärrä, miksi Redux Toolkit on olemassa ja milloin siitä tulee hyödyllinen. Tunnista, miten tilan monimutkaisuus kasvaa todellisissa sovelluksissa ja miksi yksinkertaiset lähestymistavat eivät enää skaalaudu.

Asenna Redux Toolkit ja määritä store. Yhdistä Redux React-sovellukseen ja ymmärrä, miten data kulkee järjestelmän läpi.

Määrittele tila käyttämällä sliceja ja järjestä logiikka selkeästi. Luo reduktoreita, käytä generoituja toimintoja ja pidä tila hallittavana sovelluksen kasvaessa.

Lue tietoja storesta käyttämällä useSelectoria ja päivitä niitä useDispatchin avulla. Rakenna tila oikein ja vältä yleisiä virheitä jaettuja tietoja käsitellessäsi.

Tietojen hakeminen API-rajapinnoista createAsyncThunkin avulla. Lataus- ja virhetilojen hallinta sekä käyttöliittymän pitäminen synkronoituna asynkronisten päivitysten kanssa.

Jaa tila useisiin siivuihin ja järjestä tiedostot ominaisuuksien mukaan. Yhdistä reducerit selkeästi ja säilytä selkeä rakenne sovelluksen kasvaessa.

Rakenna täydellinen sovellus käyttämällä Redux Toolkitia. Toteuta CRUD-ominaisuudet, käsittele asynkronista dataa ja paranna käyttäjäkokemusta lataus- ja virhetilojen avulla.

Projektin Perustaminen ja Tietorakenne

Projektin rakenne

Tehtävän rakenne