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


Nesta seção, será desenvolvido um aplicativo simples de **Gerenciador de Tarefas**.

O aplicativo permitirá aos usuários:

* Criar tarefas;
* Marcar tarefas como concluídas;
* Excluir tarefas;
* Carregar tarefas iniciais de uma API.



## Estrutura do Projeto

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



## Estrutura da Tarefa

Cada tarefa terá o seguinte formato:

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

Essa estrutura é simples, mas suficientemente realista para praticar o Redux Toolkit de forma adequada.



Você definiu a estrutura do projeto e o formato dos dados. Isso fornece uma base clara para construir o estado e as funcionalidades nas próximas etapas.

Aprenda a gerenciar estados complexos de aplicações em React utilizando Redux Toolkit. Compreenda quando o Redux é realmente necessário, construa estados com slices, manipule dados assíncronos e conecte tudo em um fluxo previsível.

Compreender por que o Redux Toolkit existe e quando ele se torna útil. Reconhecer como a complexidade do estado aumenta em aplicações reais e por que abordagens simples deixam de ser escaláveis.

Instalação do Redux Toolkit e configuração do store. Conexão do Redux a uma aplicação React e compreensão de como os dados fluem pelo sistema.

Definir o estado utilizando slices e organizar a lógica de forma clara. Criar reducers, utilizar actions geradas e manter o estado gerenciável conforme a aplicação cresce.

Leitura de dados do store utilizando useSelector e atualização com useDispatch. Estruturação correta do estado e prevenção de erros comuns ao trabalhar com dados compartilhados.

Buscar dados de APIs utilizando createAsyncThunk. Gerenciamento de estados de carregamento e erro, mantendo a interface do usuário sincronizada com atualizações assíncronas.

Divisão do estado em múltiplos slices e organização dos arquivos por funcionalidade. Combinação de reducers de forma limpa e manutenção de uma estrutura clara à medida que a aplicação cresce.

Construa uma aplicação completa utilizando Redux Toolkit. Implemente funcionalidades de CRUD, gerencie dados assíncronos e melhore a experiência do usuário com estados de carregamento e erro.

Configuração do Projeto e Estrutura de Dados

Estrutura do Projeto

Estrutura da Tarefa