Managing Offline-First Data in React Native Apps with Redux & AsyncStorage

Sep 23, 2025 |

10 minutes read

Why It Matters for React Native

Offline-first architecture means your app works seamlessly without internet, syncing with the backend once the connection is restored. This pattern is crucial for React Native apps that deal with forms, payments, chat, or health data. In this guide, we’ll build an offline-first flow using Redux and AsyncStorage.

Why Offline-First?

User trust: App remains usable in low-connectivity environments.
Performance: Reads occur locally, and network communication is only used when necessary.
Data safety: Pending updates are queued and synced when back online.
Scalability: Works for any domain (e.g., e-commerce carts, to-do lists, form submissions).

Core Principles

Single Source of Truth → Redux manages in-memory state.
Persistence Layer → AsyncStorage ensures state survives app restarts.
Sync Engine → Handles push/pull with the backend when online.
Conflict Resolution → Decide what wins: local or server.

Stack

Redux Toolkit → predictable state management.
AsyncStorage → persistent local storage.
Redux-Persist → bridges Redux with AsyncStorage.
NetInfo → detect connectivity changes.
Axios/Fetch → API calls with retry logic.

Setting up Redux with persistence

`
// store.ts
import { configureStore } from '@reduxjs/toolkit';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persistReducer, persistStore } from 'redux-persist';
import rootReducer from './rootReducer';

const persistConfig = {
  key: 'root',
  storage: AsyncStorage,
  whitelist: ['todos', 'cart'], // only persist specific slices
};

const persistedReducer = persistReducer(persistConfig, rootReducer);

export const store = configureStore({
  reducer: persistedReducer,
  middleware: (getDefault) => getDefault({ serializableCheck: false }),
});

export const persistor = persistStore(store);

This ensures todos and cart data survive reloads and offline restarts.

Example Slice: Offline Todo

`
// todoSlice.ts
import { createSlice, nanoid, PayloadAction } from '@reduxjs/toolkit';

type Todo = { id: string; text: string; synced: boolean };

const todoSlice = createSlice({
  name: 'todos',
  initialState: [] as Todo[],
  reducers: {
    addTodo: {
      reducer: (state, action: PayloadAction) => {
        state.push(action.payload);
      },
      prepare: (text: string) => ({
        payload: { id: nanoid(), text, synced: false },
      }),
    },
    markSynced: (state, action: PayloadAction) => {
      const todo = state.find(t => t.id === action.payload);
      if (todo) todo.synced = true;
    },
  },
});

export const { addTodo, markSynced } = todoSlice.actions;
export default todoSlice.reducer;
synced: false means pending sync.


Once the API confirms, mark as synced.

Detecting Connectivity

`
import NetInfo from '@react-native-community/netinfo';

NetInfo.addEventListener(state => {
  if (state.isConnected) {
    store.dispatch(syncTodos());
  }
});

Sync Engine

`
// sync.ts
import { store } from './store';
import { markSynced } from './todoSlice';
import axios from 'axios';

export const syncTodos = () => async (dispatch: any, getState: any) => {
  const todos = getState().todos.filter((t: any) => !t.synced);
  for (const todo of todos) {
    try {
      await axios.post('/api/todos', todo);
      dispatch(markSynced(todo.id));
    } catch (err) {
      console.warn('Retry later', todo.id);
    }
  }
};

Queues unsynced todos.


Retries automatically when connectivity returns.

Conflict Resolution Strategies

Last write wins → overwrite server with local.
Server priority → always trust the server copy.
Merge → combine changes (more complex, e.g., chat threads).

For simple apps, last write wins is fine. For collaborative apps: consider timestamps + versioning.

UI Indicators

Show offline badge when disconnected.
Mark unsynced items visually (e.g., greyed-out or with a clock icon).
Add a “Sync now” button for manual retries.

<Text>{todo.text}{!todo.synced && ‘ (pending…)’}</Text>

Testing Offline Flows

Kill the internet (Airplane mode).
Add todos offline → should persist via AsyncStorage.
Reconnect → API sync should flush pending todos.
Restart the app before reconnect → data should survive and still sync.

Best Practices

Persist only necessary slices (avoid bloating AsyncStorage).
Encrypt sensitive data (use react-native-encrypted-storage).
Batch the API sync instead of processing one by one for improved performance.
Log sync attempts for debugging.

Build Offline-First Apps That Always Stay in Sync

The Way Forward

Building an offline-first workflow with Redux and AsyncStorage empowers developers to deliver highly reliable and user-friendly React Apps. By combining a persistent state layer, connectivity detection, and a robust sync engine, your application remains functional even without network access and seamlessly updates when connectivity is restored. Whether you’re handling to-do lists, chat data, or mission-critical forms, adopting this architecture ensures better performance, stronger user trust, and long-term scalability across different domains.