Redux Thunk in React Native

React Native applications rely heavily on APIs, real-time data, and background operations. Since Redux reducers must remain synchronous, Redux Thunk provides a way to handle asynchronous work without breaking Redux’s flow.

• Managing API requests, loading states, and error handling.
• Allowing multiple actions to be dispatched from a single async operation.
• Keeping reducers clean while handling complex asynchronous logic.
• Making mobile data flows more predictable and easier to debug.

Redux Thunk

Redux Thunk is a middleware that allows Redux actions to handle asynchronous logic. It enables tasks like API calls and background operations before updating the Redux store.

• Enables actions to make API requests, run timers, or perform background operations.
• Allows dispatching different actions based on success, failure, or loading states.
• Makes asynchronous workflows easier to manage within the Redux architecture.

Features of Redux Thunk

Redux Thunk provides powerful capabilities that make handling asynchronous logic and side effects in Redux-based applications more structured and manageable.

• Asynchronous Operations: Allows Redux actions to perform tasks like API requests, database queries, and timers before updating the store.
• Side Effect Management: Handles logging, analytics, and error handling within Redux actions in an organized way.
• Access to Dispatch and State: Provides access to dispatch and the current Redux state, enabling conditional logic and multiple action dispatches.
• Multiple Action Flow: A single thunk can dispatch different actions for loading, success, and failure states during an async operation.
• Keeps Reducers Pure: Moves all asynchronous and side-effect logic out of reducers, keeping them simple, predictable, and easy to test.

Implementing Redux Thunk in React Native

Step 1: Installation

Start by installing the required packages:

npm install redux react-redux redux-thunk

Step 2: Setting up Redux Store with Thunk Middleware

Configure the Redux store with Thunk middleware:

// store.js
import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';
import rootReducer from './reducers';

const store = createStore(rootReducer, applyMiddleware(thunk));

export default store;

Step 3: Writing Thunk Actions

Create a thunk action that performs an asynchronous operation, such as fetching data from an API:

// actions.js
import axios from 'axios';

export const fetchData = () => {
  return async (dispatch) => {
    dispatch({ type: 'FETCH_DATA_REQUEST' });

    try {
      const response = await axios.get('https://api.example.com/data');
      dispatch({ type: 'FETCH_DATA_SUCCESS', payload: response.data });
    } catch (error) {
      dispatch({ type: 'FETCH_DATA_FAILURE', payload: error.message });
    }
  };
};

Step 4: Dispatching Thunk Actions

Dispatch the thunk action from your components to trigger the asynchronous operation:

// MyComponent.js
import React, { useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux';
import { fetchData } from './actions';

const MyComponent = () => {
  const dispatch = useDispatch();
  const data = useSelector(state => state.data);

  useEffect(() => {
    dispatch(fetchData());
  }, [dispatch]);

  return (
    <div>
      {/* Display fetched data */}
    </div>
  );
};

export default MyComponent;

Step 5: Handling Thunk Actions in Reducers

Update your reducers to handle the actions dispatched by the thunk:

// reducers.js
const initialState = {
  data: [],
  loading: false,
  error: null
};

const dataReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'FETCH_DATA_REQUEST':
      return { ...state, loading: true };
    case 'FETCH_DATA_SUCCESS':
      return { ...state, loading: false, data: action.payload };
    case 'FETCH_DATA_FAILURE':
      return { ...state, loading: false, error: action.payload };
    default:
      return state;
  }
};

export default dataReducer;