English 中文 العربية 日本語 Português

Redux Toolkit

Última atualização: 2026-11-03

Redux Toolkit Redux Toolkit

O Redux Toolkit (RTK) é a forma oficialmente recomendada de escrever Redux: createSlice gera um reducer e suas actions em uma etapa, configureStore conecta o devtools e o middleware para você, e o Immer embutido deixa você atualizar o estado escrevendo-o como se fosse mutável. O resultado tem muito menos boilerplate do que a configuração clássica escrita à mão, enquanto a única fonte de verdade permanece exatamente a mesma.

GrupoRoteamento e Gerenciamento
TipoBiblioteca
DesdeRedux Toolkit 2.x

ℹ️ Informação O editor transpila JSX para JavaScript e renderiza a UI real na sandbox; os componentes são montados automaticamente — sem render manual.

📝 Sintaxe

import { configureStore, createSlice } from '@reduxjs/toolkit'

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {                       // Immer: you can "mutate" directly
    inc: state => { state.value += 1 },
    addAmount: (state, action) => { state.value += action.payload }
  }
})
export const { inc, addAmount } = counterSlice.actions
export const store = configureStore({ reducer: counterSlice.reducer })

⚙️ Parâmetros

action.payloadOs dados carregados por um dispatch: em dispatch(addAmount(5)) o payload é 5, e ele é declarado pela assinatura do reducer do createSlice.

Retorna：createSlice retorna { reducer, actions }; configureStore retorna o store; dentro de um componente, useDispatch fornece a função dispatch e useSelector seleciona o estado.

▶ Exemplo

O exemplo roda direto: renderiza automaticamente ao expandir e edições valem na hora.

Saída：

Os três botões despacham inc, addAmount(10) e reset e o número acompanha — o modelo mental do Redux de uma única fonte de verdade mais atualizações puras por dispatch (simulado com useReducer).
▶ Experimente

💡 Pontos-chave

💡 Dica O reducer do createSlice pode "mutar" o estado porque o Immer está embutido, mas o resultado ainda é uma atualização imutável; nunca toque no estado fora do reducer.
ℹ️ Informação Dados assíncronos pertencem a createAsyncThunk ou RTK Query; este último também gerencia o cache de requisições e pode substituir useQuery inteiramente.
⚠️ Aviso Colocar estado local de UI (um rascunho em um input, uma flag de modal aberto) no Redux é um anti-pattern: apenas o estado de negócio compartilhado pertence ao store, o estado local fica com useState.
zustand usereducer reducer-actions usecontext
Mais casos em breve.

📚 Tutoriais Relacionados

Gerenciamento de Estado
Lição 18: como dividir slices com RTK e depurá-los.

❓ Perguntas Frequentes

P Qual a diferença entre RTK e o Redux clássico?
R Sem constantes de action escritas à mão, Immer e thunks embutidos e devtools configurados para você; mais da metade do boilerplate desaparece e é a única forma oficialmente recomendada de escrever Redux.
P state.value += 1 quebra a imutabilidade?
R Apenas na superfície: o Immer intercepta a atribuição e produz uma cópia imutável, o que equivale a { ...state, value: state.value + 1 }, mas lê-se de forma mais natural.
P Quando escolho RTK em vez de Zustand?
R Escolha RTK quando a equipe já conhece o ecossistema Redux, precisa de time travel do devtools, quer uma convenção única de middleware ou trabalha em um grupo grande; escolha Zustand quando quiser o mínimo de código e a menor pegada.
Web-Tutorial.com

Equipe Técnica Web-Tutorial

Uma plataforma de tutoriais mantida por diversos desenvolvedores. Cada tutorial é escrito e revisado por profissionais da área correspondente. Trabalhamos para manter nosso conteúdo preciso e confiável — se encontrar algum problema, avise-nos.

100%