I'm currently working on implementing a functionality where my preload shows up during an AJAX request and disappears once the request is completed, regardless of success or failure.
Utilizing Axios, I've explored their interceptors for managing both requests and responses. At the moment, my focus is on handling the request aspect.
import axios from "axios";
import {setPreLoader} from './PreLoaderActions.js';
export const axiosInstant = axios.create({
baseURL: 'http://localhost:54690/api',
timeout: 2000,
});
export const config = axiosInstant.interceptors.request.use( config => {
// Perform actions before sending the request
console.log('afaf');
setPreLoader(true);
return config;
}, function (error) {
// Handle request error
// this.setPreLoader(false);
return Promise.reject(error);
});
import {actions} from './Actions.js';
export function setPreLoader(show) {
return function (dispatch) {
dispatch({ type: actions.SHOW_PRE_LOADER, payload: { showPreLoader: show } });
};
}
Upon triggering setPreloader(true), no action seems to be triggered. There is no dispatch occurring, which is puzzling. I wonder if there's another step required, considering I've only employed this within a React component previously, so Redux/ReactJS might be handling some aspects automatically.