How to make Ajax request in Redux?

Technology CommunityCategory: ReduxHow to make Ajax request in Redux?
VietMX Staff asked 4 years ago

You can use redux-thunk middleware which allows you to define async actions. Let’s take an example of fetching specific account as a ajax call using fetch API,

export function fetchAccount(id) {
 return dispatch => {
   dispatch(setLoadingAccountState()); // Show a loading spinner
   fetch(`/account/${id}`, (response) => {
     dispatch(doneFetchingAccount()); // Hide loading spinner
     if (response.status == 200){
       dispatch(setAccount(response.json)); // Use a normal function to set the received state
     } else {
       dispatch(someError)
     }
   })
 }
}

function setAccount(data) {
   return { type: 'SET_Account', data: data };
}