Redux: o que é, padrão de gerenciamento de estado em React Native

Q: Como o Redux difere do Context API no React?

Redux é uma solução completa com Store, DevTools, Middleware e estado imutável. Context API é um mecanismo integrado do React para passar dados sem props drilling. Context é adequado para temas globais e localização, enquanto Redux é para estado complexo com operações assíncronas, cache e depuração. Em aplicações grandes, Context causa re-renderizações desnecessárias, enquanto Redux com seletores resolve esse problema.

Q: O que é Immer no Redux Toolkit?

Immer é uma biblioteca para manipulação imutável de estado, integrada ao Redux Toolkit. Immer permite escrever reducers como se estivesse mutando o estado diretamente: state.value += 1. Internamente, Immer cria um objeto proxy (draft), rastreia as alterações e retorna um novo objeto imutável. Isso reduz o volume de código do reducer em 50% e elimina mutações acidentais.

Q: Como testar o Redux?

A lógica do Redux é testada isoladamente: Reducer — uma função pura, basta chamá-la com diferentes Actions e verificar o resultado. Action Creator — verificar o objeto retornado. Thunk — mockar a API, chamar dispatch e verificar quais Actions foram despachadas. Componente com useSelector — usar Provider com um Store de teste no renderizador. Redux DevTools ajudam a escrever testes reproduzindo uma sequência de Actions de uma sessão real.

Q: Quando usar Redux em vez de useState?

useState é suficiente para estado local de um único componente: texto de campo, modal aberto/fechado. Redux é necessário quando o estado é compartilhado entre muitas telas, requer sincronização assíncrona (dados do servidor), deve persistir entre reinicializações da aplicação (persist) ou requer depuração com viagem no tempo. Para aplicações pequenas, Redux é excessivo — use Context + useReducer em vez disso.

Q: O que é normalização no Redux?

Normalizr é uma biblioteca para normalizar dados aninhados em uma estrutura plana de Store. Em vez de armazenar objetos profundos como user.posts[0].comments, a normalização cria dicionários: entities.users, entities.posts, entities.comments com referências por ID. Isso simplifica a atualização de uma única entidade em todos os lugares e acelera os seletores. O Redux Toolkit recomenda dados normalizados para modelos complexos.

Autor: IT Sectr Publicado: 2026-02-19 Tempo de leitura: 8 min

Redux é um contêiner previsível de gerenciamento de estado para aplicações JavaScript, criado por Dan Abramov em 2015. O Redux implementa fluxo de dados unidirecional baseado na arquitetura Flux: o estado é armazenado em um único Store, alterado apenas por funções Reducer puras e iniciado por meio de Action com Dispatch. De acordo com o npm Trends, o Redux mantém mais de 7 milhões de downloads semanais, permanecendo o padrão para gerenciamento de estado em React Native e aplicações web.

Principais pontos

Store — a única fonte de verdade, armazenando toda a árvore de estado da aplicação
Action — um objeto com o campo type, descrevendo a intenção de alterar o estado
Reducer — uma função pura (prevState, action) => newState sem efeitos colaterais
Dispatch — o método do Store para enviar uma Action ao Reducer
Middleware — uma camada entre dispatch e reducer para operações assíncronas e registro

O que é Redux?

Redux é um padrão arquitetural e biblioteca para gerenciamento de estado, baseado em três princípios: única fonte de verdade, estado somente leitura e alterações por meio de funções puras. Diferente do MVC, onde o modelo pode alterar o estado de forma imprevisível, o Redux garante determinismo: com os mesmos dados de entrada, o resultado é sempre o mesmo.

O Redux foi inspirado na arquitetura Flux do Facebook e na linguagem Elm. A principal diferença do Flux é um único Store em vez de vários. No Redux, todo o estado da aplicação — objetos, arrays, flags de carregamento — é armazenado em uma única árvore. Isso simplifica a depuração, os testes e a depuração com viagem no tempo. O desenvolvedor pode salvar todo o Store, reproduzir uma sequência de Actions e ver como o estado mudou em cada etapa.

De acordo com a pesquisa State of JS 2025, 68% dos entrevistados que usam gerenciamento de estado escolhem Redux ou Redux Toolkit. A ferramenta é suportada por todos os frameworks modernos: React, React Native, Angular, Vue e até JavaScript puro sem frameworks.

Fluxo de dados unidirecional

Fluxo de dados unidirecional é o princípio chave do Redux, onde os dados se movem estritamente em uma direção: View → Action → Dispatch → Reducer → Store → View. Nenhum componente pode alterar o Store diretamente. Uma View apenas se inscreve nas mudanças via useSelector ou connect e inicia alterações via dispatch.

Ciclo de trabalho do Redux: o usuário clica em um botão → o componente chama dispatch({ type: 'INCREMENT' }) → o Store passa a Action para o Root Reducer → o Reducer calcula um novo estado → o Store notifica os inscritos → a View é renderizada novamente com novos dados. Este ciclo garante que cada alteração tenha uma causa explícita na forma de uma Action específica.

DevTools — uma ferramenta integrada do Redux para monitorar cada Action, estado do Store e tempo de execução. O desenvolvedor vê uma lista de todas as Actions despachadas, a diferença de estado (diff) antes e depois, e pode reverter para qualquer estado anterior. Isso torna a depuração de estados complexos dezenas de vezes mais rápida em comparação com o registro convencional.

Componentes principais do Redux

Store — um objeto que contém a árvore de estado completa da aplicação. Criado via configureStore (RTK) ou createStore. O Store fornece três métodos: getState() para leitura, dispatch(action) para alteração e subscribe(listener) para inscrição. No Redux Toolkit, o Store já inclui middleware, DevTools e suporte a slices.

TypeScript

import { configureStore } from '@reduxjs/toolkit'

interface CounterState {
  value: number
}

const initialState: CounterState = { value: 0 }

function counterReducer(
  state = initialState,
  action: { type: string }
): CounterState {
  switch (action.type) {
    case 'INCREMENT':
      return { value: state.value + 1 }
    default:
      return state
  }
}

const store = configureStore({ reducer: counterReducer })
store.dispatch({ type: 'INCREMENT' })
console.log(store.getState()) // { value: 1 }

Action e Action Creator — uma Action é um objeto com o campo obrigatório type (uma constante string) e um payload opcional (dados). Um Action Creator é uma função que retorna uma Action. No Redux Toolkit, createAction é usado para gerar Actions com tipagem automática.

Reducer — uma função pura que recebe o estado atual e uma Action, retornando um novo estado. Um Reducer não deve: mutar o estado (um novo objeto é retornado), chamar APIs, gerar números aleatórios ou acessar Date. A imutabilidade é garantida pelo operador spread ... ou Immer (integrado ao RTK).

Componente	Responsabilidade	Restrições
Store	Armazenar estado, dispatch, subscribe	Um por aplicação
Action	Descrever a intenção de alterar o estado	Deve ter type
Reducer	Calcular novo estado	Função pura, sem efeitos colaterais
Dispatch	Enviar Action ao Reducer	Síncrono por padrão
Selector	Extrair dados do Store	Memoização via createSelector

Middleware e Redux Thunk

Middleware é uma cadeia de funções inserida entre a chamada dispatch e o momento em que a Action chega ao Reducer. Cada middleware recebe a API do Store e pode registrar, modificar, atrasar ou cancelar Actions. Redux Thunk é o middleware padrão para operações assíncronas, permitindo despachar funções em vez de objetos.

JavaScript

import { createAsyncThunk } from '@reduxjs/toolkit'

export const fetchUser = createAsyncThunk(
  'users/fetchById',
  async (userId: number, { rejectWithValue }) => {
    const response = await fetch(`/api/users/${userId}`)
    if (!response.ok)
      return rejectWithValue('Failed to fetch')
    return await response.json()
  }
)

Middlewares populares: Redux Thunk — para chamadas assíncronas simples, Redux Saga — para cenários complexos com sagas geradoras (debounce, race, requisições paralelas), Redux Observable — baseado em RxJS para fluxos reativos. No Redux Toolkit, o middleware é conectado via parâmetro middleware no configureStore.

De acordo com a pesquisa State of JS 2025, Thunk é usado em 72% dos projetos Redux, Saga em 18% e Observable em 5%. Para a maioria das aplicações, uma combinação de Thunk + RTK Query é suficiente para cobrir 95% dos fluxos de trabalho assíncronos com dados.

Redux Toolkit e RTK Query

Redux Toolkit (RTK) é a forma oficial e recomendada de escrever lógica Redux, lançada em 2019. O RTK inclui configureStore, createSlice, createAsyncThunk e createEntityAdapter, reduzindo o boilerplate do Redux em 60-70%. Em vez de criar manualmente Action Creators, Reducers e tipos, um único createSlice é usado.

TypeScript

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

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

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

RTK Query é uma solução integrada para trabalhar com APIs baseada no Redux Toolkit. Permite definir endpoints de forma declarativa via createApi com geração automática de hooks, cache, invalidação de tags e atualizações otimistas. O RTK Query substitui a escrita manual de Thunk, Reducer e Selector para cada requisição de API.

Entity Adapter — a utilidade createEntityAdapter para normalizar coleções de entidades. Fornece reducers CRUD integrados, seletores e ordenação para arrays de objetos. Se o Store contém listas de usuários, produtos ou pedidos — o Entity Adapter reduz o código do reducer em 80%.

Redux no React Native

React Native Redux é a stack padrão para aplicações móveis em JavaScript. O Redux é integrado via Provider do react-redux, envolvendo o componente raiz da aplicação. Os hooks useSelector e useDispatch dão aos componentes acesso ao estado sem props drilling. Persist — redux-persist salva o Store no AsyncStorage ou MMKV, restaurando o estado após reiniciar a aplicação.

Middleware para React Native: redux-flipper para depuração via Flipper, redux-observable para fluxos reativos com drivers nativos, react-native-mmkv para armazenamento persistente rápido. O plugin de navegação redux-first-router conecta as telas ao Store, permitindo restaurar o estado da tela ao retornar.

No React Native, o Redux é usado junto com uma estratégia network-first: o app primeiro tenta carregar dados do servidor, depois os armazena em cache no Store via RTK Query ou redux-persist. O modo offline é alcançado combinando Redux + NetInfo + uma fila de Actions para reenvio quando a conexão for restaurada.

Perguntas frequentes

Como o Redux difere do Context API no React?

Redux é uma solução completa com Store, DevTools, Middleware e estado imutável. Context API é um mecanismo integrado do React para passar dados sem props drilling. Context é adequado para temas globais e localização, enquanto Redux é para estado complexo com operações assíncronas, cache e depuração. Em aplicações grandes, Context causa re-renderizações desnecessárias, enquanto Redux com seletores resolve esse problema.

O que é Immer no Redux Toolkit?

Immer é uma biblioteca para manipulação imutável de estado, integrada ao Redux Toolkit. Immer permite escrever reducers como se estivesse mutando o estado diretamente: state.value += 1. Internamente, Immer cria um objeto proxy (draft), rastreia as alterações e retorna um novo objeto imutável. Isso reduz o volume de código do reducer em 50% e elimina mutações acidentais.

Como testar o Redux?

A lógica do Redux é testada isoladamente: Reducer — uma função pura, basta chamá-la com diferentes Actions e verificar o resultado. Action Creator — verificar o objeto retornado. Thunk — mockar a API, chamar dispatch e verificar quais Actions foram despachadas. Componente com useSelector — usar Provider com um Store de teste no renderizador. Redux DevTools ajudam a escrever testes reproduzindo uma sequência de Actions de uma sessão real.

Quando usar Redux em vez de useState?

useState é suficiente para estado local de um único componente: texto de campo, modal aberto/fechado. Redux é necessário quando o estado é compartilhado entre muitas telas, requer sincronização assíncrona (dados do servidor), deve persistir entre reinicializações da aplicação (persist) ou requer depuração com viagem no tempo. Para aplicações pequenas, Redux é excessivo — use Context + useReducer em vez disso.

O que é normalização no Redux?

Normalizr é uma biblioteca para normalizar dados aninhados em uma estrutura plana de Store. Em vez de armazenar objetos profundos como user.posts[0].comments, a normalização cria dicionários: entities.users, entities.posts, entities.comments com referências por ID. Isso simplifica a atualização de uma única entidade em todos os lugares e acelera os seletores. O Redux Toolkit recomenda dados normalizados para modelos complexos.

Resumo

Redux — um contêiner de estado previsível com um único Store e Reducers puros
Action — um objeto com type, Reducer — função pura, Dispatch — o mecanismo de envio
Redux Toolkit — a API oficial com createSlice, createAsyncThunk e RTK Query
Middleware — uma camada para assincronia: Thunk, Saga, Observable
React Native é integrado via Provider, useSelector e redux-persist para modo offline
DevTools — depuração com viagem no tempo reproduzindo cada Action
Normalizr — normalização de dados para seletores e atualizações eficientes

Vamos desenvolver um aplicativo móvel chave na mão

A IT Sectr cria aplicativos para iOS e Android para startups e empresas desde 2017. Nós vamos aconselhá-lo e propor a melhor solução.

Discutir o projeto