Redux: what it is, state management pattern in React Native

Q: How is Redux different from Context API in React?

Redux is a full-featured solution with Store, DevTools, Middleware, and immutable state. Context API is a built-in React mechanism for passing data without props drilling. Context is suitable for global themes and localization, while Redux is for complex state with async operations, caching, and debugging. In large applications, Context causes unnecessary re-renders, while Redux with selectors solves this problem.

Q: What is Immer in Redux Toolkit?

Immer is a library for immutable state management, built into Redux Toolkit. Immer allows writing reducers as if mutating state directly: state.value += 1. Under the hood, Immer creates a proxy object (draft), tracks changes, and returns a new immutable object. This reduces reducer code volume by 50% and eliminates accidental mutations.

Q: How to test Redux?

Redux logic is tested in isolation: Reducer — a pure function, just call it with different Actions and check the result. Action Creator — verify the returned object. Thunk — mock the API, call dispatch, and check which Actions were dispatched. Component with useSelector — use Provider with a test Store in the renderer. Redux DevTools help write tests by replaying an Action sequence from a real session.

Q: When should I use Redux instead of useState?

useState is sufficient for local state of a single component: input text, modal open/close. Redux is needed when state is shared across many screens, requires async synchronization (data from the server), should persist between application restarts (persist), or requires time-travel debugging. For small applications, Redux is overkill — use Context + useReducer instead.

Q: What is normalization in Redux?

Normalizr is a library for normalizing nested data into a flat Store structure. Instead of storing deep objects like user.posts[0].comments, normalization creates dictionaries: entities.users, entities.posts, entities.comments with references by ID. This simplifies updating a single entity everywhere and speeds up selectors. Redux Toolkit recommends normalized data for complex models.

Author: IT Sectr Published: 2026-02-19 Reading time: 8 min

Redux is a predictable state management container for JavaScript applications, created by Dan Abramov in 2015. Redux implements unidirectional data flow based on the Flux architecture: state is stored in a single Store, changed only through pure Reducer functions, and initiated via Action with Dispatch. According to npm Trends, Redux maintains over 7 million weekly downloads, remaining the standard for state management in React Native and web applications.

Key Takeaways

Store — the single source of truth, storing the entire application state tree
Action — an object with a type field, describing an intention to change state
Reducer — a pure function (prevState, action) => newState with no side effects
Dispatch — the Store method for sending an Action to the Reducer
Middleware — a layer between dispatch and reducer for async operations and logging

What is Redux?

Redux is an architectural pattern and library for state management, based on three principles: single source of truth, read-only state, and changes through pure functions. Unlike MVC, where the model can change state unpredictably, Redux guarantees determinism: given the same input data, the result is always the same.

Redux was inspired by Facebook's Flux architecture and the Elm language. The main difference from Flux is a single Store instead of multiple ones. In Redux, all application state — objects, arrays, loading flags — is stored in a single tree. This simplifies debugging, testing, and time-travel debugging. A developer can save the entire Store, replay a sequence of Actions, and see how the state changed at each step.

According to the State of JS 2025 survey, 68% of respondents using state management choose Redux or Redux Toolkit. The tool is supported by all modern frameworks: React, React Native, Angular, Vue, and even vanilla JavaScript without frameworks.

Unidirectional Data Flow

Unidirectional data flow is the key principle of Redux, where data moves strictly in one direction: View → Action → Dispatch → Reducer → Store → View. No component can change the Store directly. A View only subscribes to changes via useSelector or connect and initiates changes via dispatch.

Redux workflow cycle: the user clicks a button → the component calls dispatch({ type: 'INCREMENT' }) → the Store passes the Action to the Root Reducer → the Reducer computes a new state → the Store notifies subscribers → the View re-renders with new data. This cycle guarantees that every change has an explicit cause in the form of a specific Action.

DevTools — a built-in Redux tool for monitoring every Action, Store state, and execution time. The developer sees a list of all dispatched Actions, the state diff before and after, and can roll back to any previous state. This makes debugging complex states tens of times faster compared to conventional logging.

Core Redux Components

Store — an object containing the complete application state tree. Created via configureStore (RTK) or createStore. Store provides three methods: getState() for reading, dispatch(action) for changing, and subscribe(listener) for subscribing. In Redux Toolkit, Store already includes middleware, DevTools, and slice support.

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 and Action Creator — an Action is an object with a mandatory type field (a string constant) and an optional payload (data). An Action Creator is a function that returns an Action. In Redux Toolkit, createAction is used to generate Actions with automatic typing.

Reducer — a pure function that receives the current state and an Action, returning a new state. A Reducer must not: mutate state (a new object is returned), call APIs, generate random numbers, or access Date. Immutability is achieved via the spread operator ... or Immer (built into RTK).

Component	Responsibility	Constraints
Store	Storing state, dispatch, subscribe	One per application
Action	Describing an intention to change state	Must have type
Reducer	Computing new state	Pure function, no side effects
Dispatch	Sending Action to Reducer	Synchronous by default
Selector	Extracting data from Store	Memoization via createSelector

Middleware and Redux Thunk

Middleware is a chain of functions inserted between the dispatch call and the moment the Action reaches the Reducer. Each middleware receives the Store API and can log, modify, delay, or cancel Actions. Redux Thunk is the standard middleware for async operations, allowing dispatching functions instead of objects.

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()
  }
)

Popular middleware: Redux Thunk — for simple async calls, Redux Saga — for complex scenarios with generator sagas (debounce, race, parallel requests), Redux Observable — based on RxJS for reactive streams. In Redux Toolkit, middleware is connected via the middleware parameter in configureStore.

According to the State of JS 2025 survey, Thunk is used in 72% of Redux projects, Saga in 18%, Observable in 5%. For most applications, a combination of Thunk + RTK Query is sufficient to cover 95% of async data workflows.

Redux Toolkit and RTK Query

Redux Toolkit (RTK) is the official, recommended way to write Redux logic, released in 2019. RTK includes configureStore, createSlice, createAsyncThunk, and createEntityAdapter, reducing Redux boilerplate by 60-70%. Instead of manually creating Action Creators, Reducers, and types, a single createSlice is used.

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 is a built-in solution for working with APIs based on Redux Toolkit. It allows defining endpoints declaratively via createApi with automatic hook generation, caching, tag invalidation, and optimistic updates. RTK Query replaces manual Thunk, Reducer, and Selector writing for every API request.

Entity Adapter — the createEntityAdapter utility for normalizing entity collections. Provides built-in CRUD reducers, selectors, and sorting for object arrays. If the Store contains lists of users, products, or orders — Entity Adapter reduces reducer code by 80%.

Redux in React Native

React Native Redux is the standard stack for mobile applications in JavaScript. Redux integrates via Provider from react-redux, wrapping the root application component. The useSelector and useDispatch hooks give components access to state without props drilling. Persist — redux-persist saves the Store in AsyncStorage or MMKV, restoring state after application restart.

Middleware for React Native: redux-flipper for debugging via Flipper, redux-observable for reactive streams with native drivers, react-native-mmkv for fast persistent storage. The navigation plugin redux-first-router connects screens to the Store, allowing screen state restoration upon return.

In React Native, Redux is used together with a network-first strategy: the app first tries to load data from the server, then caches it in the Store via RTK Query or redux-persist. Offline mode is achieved by combining Redux + NetInfo + a queue of Actions for re-dispatching when the connection is restored.

Frequently Asked Questions

How is Redux different from Context API in React?

Redux is a full-featured solution with Store, DevTools, Middleware, and immutable state. Context API is a built-in React mechanism for passing data without props drilling. Context is suitable for global themes and localization, while Redux is for complex state with async operations, caching, and debugging. In large applications, Context causes unnecessary re-renders, while Redux with selectors solves this problem.

What is Immer in Redux Toolkit?

Immer is a library for immutable state management, built into Redux Toolkit. Immer allows writing reducers as if mutating state directly: state.value += 1. Under the hood, Immer creates a proxy object (draft), tracks changes, and returns a new immutable object. This reduces reducer code volume by 50% and eliminates accidental mutations.

How to test Redux?

Redux logic is tested in isolation: Reducer — a pure function, just call it with different Actions and check the result. Action Creator — verify the returned object. Thunk — mock the API, call dispatch, and check which Actions were dispatched. Component with useSelector — use Provider with a test Store in the renderer. Redux DevTools help write tests by replaying an Action sequence from a real session.

When should I use Redux instead of useState?

useState is sufficient for local state of a single component: input text, modal open/close. Redux is needed when state is shared across many screens, requires async synchronization (data from the server), should persist between application restarts (persist), or requires time-travel debugging. For small applications, Redux is overkill — use Context + useReducer instead.

What is normalization in Redux?

Normalizr is a library for normalizing nested data into a flat Store structure. Instead of storing deep objects like user.posts[0].comments, normalization creates dictionaries: entities.users, entities.posts, entities.comments with references by ID. This simplifies updating a single entity everywhere and speeds up selectors. Redux Toolkit recommends normalized data for complex models.

Summary

Redux — a predictable state container with a single Store and pure Reducers
Action — an object with type, Reducer — a pure function, Dispatch — the sending mechanism
Redux Toolkit — the official API with createSlice, createAsyncThunk, and RTK Query
Middleware — a layer for asynchronicity: Thunk, Saga, Observable
React Native integrates via Provider, useSelector, and redux-persist for offline mode
DevTools — time-travel debugging with replay of every Action
Normalizr — data normalization for efficient selectors and updates

We will develop a mobile application turnkey

IT Sectr creates iOS and Android applications for startups and businesses since 2017. We will advise you and propose the best solution.

Discuss the project