Difference Between Synchronous and Asynchronous Action Creators

In web development, Redux has become very popular for managing application state. Action creators play an important role in Redux, which helps the dispatching of actions to update the state.

In this article, we will understand the difference between synchronous and asynchronous action creators.

What are Synchronous Action Creators?

Synchronous action creators dispatch actions immediately after they are called. These actions typically represent simple state changes that do not require any external data fetching or asynchronous operations.

Syntax:

const incrementCounter = () => ({
  type: 'INCREMENT_COUNTER',
});

Features of Synchronous Action Creators

• Immediate dispatch: Actions are dispatched instantly upon calling the action creator function.
• Simple state changes: Suitable for handling simple state modifications.
• No external dependencies: Synchronous actions do not rely on external data fetching or asynchronous operations.
• Predictable flow: Execution of synchronous actions follows a easy flow, that makes the debugging easier.
• Limited complexity: Ideal for scenarios where state updates are predictable and do not involve complex computations.

Example: In this sample code there is a flow of synchronous action creator to understand.

// Redux setup
import { createStore } from 'redux';

// Initial state
const initialState = {
    counter: 0
};

// Reducer
const reducer = (state = initialState, action) => {
    switch (action.type) {
        case 'INCREMENT_COUNTER':
            return {
                ...state,
                counter: state.counter + 1
            };
        default:
            return state;
    }
};

// Create Redux store
const store = createStore(reducer);

// Synchronous action creator
const incrementCounter = () => ({
    type: 'INCREMENT_COUNTER'
});

// Dispatch the action
store.dispatch(incrementCounter());

// Check the updated state
console.log(store.getState()); // Output: { counter: 1 }

What are Asynchronous Action Creators?

Asynchronous action creators dispatch actions asynchronously, which involves external data fetching or complex operations that require time to complete.

Syntax:

const fetchData = () => {
  return async (dispatch) => {
    const data = await fetchDataFromAPI();
    dispatch({ type: 'FETCH_DATA', payload: data });
  };
};

Features of Asynchronous Action Creators

• Asynchronous behavior: Actions are dispatched asynchronously, that allows for non-blocking execution.
• External data fetching: Typically used for fetching data from APIs or performing other asynchronous operations.
• Complex state updates: Suitable for scenarios where state changes involve complex computations or asynchronous operations.
• Middleware integration: Often used with middleware like Redux Thunk or Redux Saga to handle asynchronous actions seamlessly.
• Enhanced scalability: Supports scalable application architectures by enabling efficient handling of asynchronous operations without blocking the main thread.

Example: In this sample code there is a flow of asynchronous action creator to understand.

// Redux setup

import { createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// Initial state
const initialState = {
    data: null,
    loading: false
};

// Reducer
const reducer = (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
            };
        default:
            return state;
    }
};

// Create Redux store with thunk middleware
const store = createStore(reducer, applyMiddleware(thunk));

// Asynchronous action creator
const fetchData = () => {
    return async (dispatch) => {
        dispatch({ type: 'FETCH_DATA_REQUEST' });

        try {
            // Simulating API call
            const response = await fetch('https://api.example.com/data');
            const data = await response.json();

            dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
        } catch (error) {
            // Handle error
            console.error('Error fetching data:', error);
        }
    };
};

// Dispatch the asynchronous action
store.dispatch(fetchData());

// Check the initial state
console.log(store.getState()); // Output: { data: null, loading: true }

Differences Between Synchronous and Asynchronous Action Creators

Conclusion

Synchronous action creators dispatch actions immediately when invoked, that makes them suitable for simple state changes without external dependencies. On the other hand, asynchronous action creators dispatch actions asynchronously and involves external data fetching or complex computations.