Spec Frontend Com React • Trilha Progressiva em 4 Níveis

🧭 Navegação Pedagógica

🎯 Nível 1: Fundamentos

Problema 15.1 — Criação de Slice com createSlice() e Reducers

Contexto: Criação de Slice com createSlice() e Reducers no contexto de Estado Global com Redux Toolkit (RTK).

Requisitos de Execução:

  1. Criar counterSlice definindo estado inicial e reducers increment, decrement e incrementByAmount.

Resultado Esperado

Slice Redux configurado com geração automática de action creators.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_15_1_SeuNome
  2. Envie na tarefa: Atividade Cap 15 - Estado Global com Redux Toolkit (RTK)
🔑 Gabarito de Código & Solução Comentada 
// counterSlice.ts
import { createSlice, PayloadAction } from '@reduxjs/toolkit';

interface CounterState { value: number; }
const initialState: CounterState = { value: 0 };

export const counterSlice = createSlice({
  name: 'counter',
  initialState,
  reducers: {
    increment: (state) => { state.value += 1; },
    decrement: (state) => { state.value -= 1; },
    incrementByAmount: (state, action: PayloadAction<number>) => {
      state.value += action.payload;
    },
  },
});

export const { increment, decrement, incrementByAmount } = counterSlice.actions;
export default counterSlice.reducer;

🔍 Nível 2: Prática

Problema 15.2 — Configuração da Store com configureStore() e Hooks Tipados

Contexto: Configuração da Store com configureStore() e Hooks Tipados no contexto de Estado Global com Redux Toolkit (RTK).

Requisitos de Execução:

  1. Configurar store.ts e exportar hooks tipados useAppDispatch e useAppSelector.

Resultado Esperado

Store configurada com Middleware padrão e tipos RootState e AppDispatch exportados.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_15_2_SeuNome
  2. Envie na tarefa: Atividade Cap 15 - Estado Global com Redux Toolkit (RTK)
🔑 Gabarito de Código & Solução Comentada 
// store.ts
import { configureStore } from '@reduxjs/toolkit';
import { TypedUseSelectorHook, useDispatch, useSelector } from 'react-redux';
import counterReducer from './counterSlice';

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

export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

export const useAppDispatch: () => AppDispatch = useDispatch;
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

⚡ Nível 3: Integração

Problema 15.3 — Operações Assíncronas com createAsyncThunk

Contexto: Operações Assíncronas com createAsyncThunk no contexto de Estado Global com Redux Toolkit (RTK).

Requisitos de Execução:

  1. Criar thunk fetchUsuarios com tratamento de estados pending, fulfilled e rejected em extraReducers.

Resultado Esperado

Thunk assíncrono buscando dados de API com ciclo de vida completo no Redux.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_15_3_SeuNome
  2. Envie na tarefa: Atividade Cap 15 - Estado Global com Redux Toolkit (RTK)
🔑 Gabarito de Código & Solução Comentada 
// usersThunk.ts
import { createAsyncThunk, createSlice } from '@reduxjs/toolkit';

export const fetchUsuarios = createAsyncThunk('users/fetch', async () => {
  const response = await fetch('/api/users');
  return response.json();
});

export const usersSlice = createSlice({
  name: 'users',
  initialState: { list: [], loading: false },
  reducers: {},
  extraReducers: (builder) => {
    builder
      .addCase(fetchUsuarios.pending, (state) => { state.loading = true; })
      .addCase(fetchUsuarios.fulfilled, (state, action) => {
        state.loading = false;
        state.list = action.payload;
      });
  },
});

🏆 Nível 4: Desafio Corporativo

Problema 15.4 — RTK Query para Caching e Geração Automática de Hooks de API

Contexto: RTK Query para Caching e Geração Automática de Hooks de API no contexto de Estado Global com Redux Toolkit (RTK).

Requisitos de Execução:

  1. Declarar API com createApi({ reducerPath, baseQuery, endpoints }) gerando hook useGetProdutosQuery.

Resultado Esperado

RTK Query gerenciando caching, deduplicação e polling de dados da API.

📤 Instruções de Entrega (Microsoft Teams)

  1. Salve o arquivo como: Atividade_15_4_SeuNome
  2. Envie na tarefa: Atividade Cap 15 - Estado Global com Redux Toolkit (RTK)
🔑 Gabarito de Código & Solução Comentada 
// apiSlice.ts
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const produtosApi = createApi({
  reducerPath: 'produtosApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api/' }),
  endpoints: (builder) => ({
    getProdutos: builder.query<any[], void>({ query: () => 'produtos' }),
  }),
});

export const { useGetProdutosQuery } = produtosApi;
⬅️ Voltar ao Índice de Exercícios 📚 Sumário de Tópicos