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

`
// 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.

`
// 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.

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

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

`
// 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.