Implementing Redux Thunk Middleware for Async Actions

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

// Define the initial state of our store
const initialState = { data: [], loading: false, error: null };

// Example of an async action creator using redux-thunk
const fetchData = () => (dispatch) => {
    // First dispatch an immediate synchronous action to start the loading process
    dispatch({ type: 'FETCH_DATA_START' });
    
    // Then perform the asynchronous task, e.g., fetching data from an API
    fetch('/data')
        .then(response => response.json())
        .then(data => {
            // Dispatch another action to signal the completion and pass the data
            dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data });
        })
        .catch(error => {
            // In case of error, dispatch an action with the error
            dispatch({ type: 'FETCH_DATA_ERROR', payload: error });
        });
};

// Reducer to handle the actions
const rootReducer = (state = initialState, action) => {
    switch (action.type) {
        case 'FETCH_DATA_START':
            return { ...state, loading: true, error: null };
        case 'FETCH_DATA_SUCCESS':
            return { ...state, loading: false, data: action.payload };
        case 'FETCH_DATA_ERROR':
            return { ...state, loading: false, error: action.payload };
        default:
            return state;
    }
};

// Create store with the rootReducer and apply the thunk middleware
const store = createStore(
    rootReducer,
    applyMiddleware(thunk)
);