Estado Global

Redux Toolkit — Guia Moderno

createSlice, RTK Query, Immer por padrão. Redux sem boilerplate em 2025.

Definição

Redux Toolkit (RTK) é a forma oficial e moderna de usar Redux — elimina 80% do boilerplate original. createSlice cria actions e reducer juntos com Immer (mutação sintática, imutabilidade real). RTK Query é uma solução completa de data fetching integrada: cache, invalidação, otimismo, e polling sem configuração manual.

Problema → Solução

Problema

Redux "clássico" com actions, action creators, action types constantes, reducers com switch/case, normalização manual — centenas de linhas de boilerplate para uma feature simples.

Solução

createSlice para estado de UI. RTK Query para estado de servidor (substitui React Query para projetos já em Redux). configureStore com middleware automático. DevTools integradas sem configuração.

Dica de entrevista

Tip

Se está começando um projeto novo em 2025 sem Redux legacy, use Zustand + React Query. RTK vale quando: já tem Redux na codebase, time conhece Redux, ou precisa do ecossistema Redux (devtools avançadas, middleware específico).

Código

// createSlice — reducer + actions juntos
import { createSlice, type PayloadAction } from '@reduxjs/toolkit'

const cartSlice = createSlice({
  name: 'cart',
  initialState: { items: [] as CartItem[], isOpen: false },
  reducers: {
    addItem(state, action: PayloadAction<CartItem>) {
      state.items.push(action.payload)  // Immer: mutação segura
    },
    removeItem(state, action: PayloadAction<string>) {
      state.items = state.items.filter(i => i.id !== action.payload)
    },
    toggleCart(state) { state.isOpen = !state.isOpen },
  },
})

export const { addItem, removeItem, toggleCart } = cartSlice.actions

// RTK Query — data fetching integrado
import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react'

export const productsApi = createApi({
  reducerPath: 'productsApi',
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  tagTypes: ['Product'],
  endpoints: (build) => ({
    getProducts: build.query<Product[], void>({
      query: () => '/products',
      providesTags: ['Product'],
    }),
    addProduct: build.mutation<Product, Partial<Product>>({
      query: (body) => ({ url: '/products', method: 'POST', body }),
      invalidatesTags: ['Product'], // auto-refetch após mutation
    }),
  }),
})

export const { useGetProductsQuery, useAddProductMutation } = productsApi

Perguntas de entrevista

Q.O que o Immer faz no createSlice?▾

A.Immer usa Proxy para interceptar mutações: você escreve `state.count++` e Immer produz um novo objeto imutável por baixo. Isso elimina o spread manual (`...state, count: state.count + 1`). Mais legível, menos propenso a bugs de imutabilidade.

Q.RTK Query vs React Query: qual escolher?▾

A.RTK Query: integra ao store Redux (cache acessível via state), devtools do Redux mostram requests, bom para projetos já em Redux. React Query: independente, mais features (infinite query, offline, mutations), melhor ecosystem. Para projetos novos sem Redux: React Query. Para projetos Redux: RTK Query faz sentido.

Q.Como estruturar slices em projetos grandes?▾

A.Uma slice por feature/domínio: authSlice, cartSlice, uiSlice. Separar estado de UI (modais, loading local) de estado de servidor (que deve estar no React Query/RTK Query). Evitar "god slice" com tudo junto. Combinar com Feature-Sliced Design: cada feature tem sua slice e api.

Termos relacionados

68/122← →