Frontend Academy · Aula

Redux Toolkit: createSlice e configureStore

Defina fatias de estado com createSlice, combine-as em configureStore e despache ações de componentes React usando useDispatch e useSelector.

Redux Toolkit: createSlice e configureStore é uma aula grátis de Frontend Academy no CoddyKit. Esta é a aula 1 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Frontend Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Frontend Academy inclui 4 aulas no total.

Por que usar o Redux Toolkit?

Redux Toolkit (RTK) é a forma oficial e opinativa de escrever lógica Redux. Ele elimina o código repetitivo do Redux básico: não há strings manuais de tipos de ação, redutores verbosos nem configuração complexa do store.

Instalando o Redux Toolkit

Instale o RTK e a vinculação com React.

npm install @reduxjs/toolkit react-redux

createSlice — Estado + Redutor + Ações

createSlice cria uma fatia do estado com seu redutor e seus criadores de ações em uma única chamada. Internamente, ele usa Immer para realizar atualizações imutáveis.

import { createSlice } from '@reduxjs/toolkit';

const counterSlice = createSlice({
  name: 'counter',
  initialState: { value: 0 },
  reducers: {
    increment: state => { state.value++; },     // Immer: mutate directly
    decrement: state => { state.value--; },
    reset: state => { state.value = 0; },
    incrementBy: (state, action) => { state.value += action.payload; }
  }
});

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

configureStore — Montando o store

configureStore cria o store Redux com padrões sensatos: Redux DevTools ativado e middleware thunk incluído.

import { configureStore } from '@reduxjs/toolkit';
import counterReducer from './counterSlice';
import cartReducer from './cartSlice';

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

// TypeScript types:
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Fornecendo o store

Envolva seu app com <Provider store={store}> de react-redux.

import { Provider } from 'react-redux';
import { store } from './store';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <Provider store={store}>
    <App />
  </Provider>
);

useSelector — Lendo o estado

useSelector(selector) lê dados do store. Ele renderiza novamente o componente quando a fatia selecionada muda.

import { useSelector } from 'react-redux';
import type { RootState } from './store';

function Counter() {
  const count = useSelector((state: RootState) => state.counter.value);
  return <p>Count: {count}</p>;
}

useDispatch — Despachando ações

useDispatch() retorna a função dispatch do store. Chame-a com um criador de ações para acionar uma alteração de estado.

import { useDispatch } from 'react-redux';
import { increment, incrementBy } from './counterSlice';

function Controls() {
  const dispatch = useDispatch();
  return (
    <div>
      <button onClick={() => dispatch(increment())}>+1</button>
      <button onClick={() => dispatch(incrementBy(5))}>+5</button>
    </div>
  );
}

createAsyncThunk — Ações assíncronas

createAsyncThunk do RTK gerencia operações assíncronas (chamadas à API) e despacha automaticamente ações pendentes, concluídas ou rejeitadas.

import { createAsyncThunk } from '@reduxjs/toolkit';

export const fetchUser = createAsyncThunk(
  'user/fetchById',
  async (userId: string) => {
    const res = await fetch(`/api/users/${userId}`);
    return res.json(); // becomes action.payload on fulfilled
  }
);

// In slice:
extraReducers: (builder) => {
  builder
    .addCase(fetchUser.pending, state => { state.loading = true; })
    .addCase(fetchUser.fulfilled, (state, action) => {
      state.loading = false;
      state.user = action.payload;
    });
}

RTK Query — Busca de dados integrada

RTK Query (parte do RTK) fornece busca, armazenamento em cache e invalidação automáticos de dados. Defina endpoints da API e obtenha ganchos gerados automaticamente.

import { createApi, fetchBaseQuery } from '@reduxjs/toolkit/query/react';

export const api = createApi({
  baseQuery: fetchBaseQuery({ baseUrl: '/api' }),
  endpoints: (build) => ({
    getUsers: build.query<User[], void>({ query: () => 'users' }),
  })
});

// Generated hook:
const { data, isLoading, error } = api.useGetUsersQuery();

Immer nos redutores

O RTK usa Immer internamente, portanto os redutores de fatias podem alterar o estado diretamente. Immer detecta as alterações e produz um novo objeto de estado imutável — você obtém a praticidade da mutação com a segurança da imutabilidade.

Redux DevTools

A extensão de navegador Redux DevTools permite inspecionar cada ação despachada, o estado resultante e até viajar no tempo: voltar a qualquer estado anterior. É indispensável para depurar fluxos de estado complexos.

Verificação rápida

O que createSlice do Redux Toolkit gera automaticamente?

Recapitulação: Redux Toolkit

createSlice combina redutor e ações em uma única definição. Immer permite “alterar” o estado com segurança. configureStore reúne os redutores com DevTools e thunk. useSelector lê o estado. useDispatch despacha ações. createAsyncThunk é usado para fluxos assíncronos. RTK Query oferece busca completa de dados com armazenamento em cache.

Perguntas Frequentes

A aula “Redux Toolkit: createSlice e configureStore” é grátis?

Sim — o texto completo de “Redux Toolkit: createSlice e configureStore” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Frontend Academy, atualize para CoddyKit PRO. O curso de Frontend Academy inclui 4 aulas no total.

O que vou aprender em “Redux Toolkit: createSlice e configureStore”?

Defina fatias de estado com createSlice, combine-as em configureStore e despache ações de componentes React usando useDispatch e useSelector. Você pratica Frontend Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.

Preciso ter experiência prévia para começar Frontend Academy?

Nenhuma experiência prévia é necessária. Frontend Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 1 de 4.

Quanto tempo leva a aula “Redux Toolkit: createSlice e configureStore”?

A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.

Posso escrever e executar código nesta aula de Frontend Academy?

Sim. Cada aula de Frontend Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.

Todas as aulas deste curso

Redux Toolkit: createSlice e configureStore
Zustand para estado leve no React
Pinia para Vue: defineStore e storeToRefs
Quando usar estado global ou local

← Voltar para Frontend Academy