title: React Redux handling response after axios resubmit original request
body: <p>I have a small booking program to practice ReactJS + Redux + ReduxSaga + Axios + Axios Interceptor + JWT authentication</p>
  <p>Here is the code in the component BookingDialog after the submit button click</p>
  <p>bookingDialog.js</p>
  <pre><code>    const handleSubmit = (event) =&gt; {
          event.preventDefault();
          let payload = {
              selectedDate: selectedDate,
              carId : carDetail.id,
              userId : user.login.id, //or pass by jwt accesstoken
              remarks: remarks
          }
          console.log(payload);
          dispatch(createBooking(payload));
      }
  </code></pre>
  <p>And there is saga watcher which take latest of action createBooking to function handleCreateBooking</p>
  <p>bookingSaga.js</p>
  <pre><code>export function* handleCreateBooking(action) {
      try {
          const response = yield call(createBooking, action.payload);
          const { data } = response;
          console.log(&quot;handleCreateBooking&quot;);
          console.log(response);
          if (data &amp;&amp; data.result &amp;&amp; data.result &gt; 0){
              console.log(&quot;booked successfully&quot;);
              yield put(setMessageBarOpen({type: &quot;success&quot;, content: &quot;booked successfully&quot;}));
              yield put(setCreateBookingOpen(false));
          }
          else{
              console.log(&quot;booked failed&quot;);
              //yield put(setMessageBarOpen({type: &quot;error&quot;, content: &quot;booked failed&quot;}));
              //yield put(setCreateBookingOpen(false));
          }
      } catch (error) {
          console.log(error);
      }
  }
  </code></pre>
  <p>bookingRequest.js</p>
  <pre><code>const createBooking = (payload) =&gt; {
      return postUrl(apiURL.createBooking.url, payload).then((res) =&gt; {
              return res
          });
  }
  </code></pre>
  <p>The program works as expected. Success message shown and booking dialog closed after submission.</p>
  <p>If the jwt is expired, the program will retrieve the access token by refresh token and resubmit the original request with the new access token.</p>
  <p><strong>The problem is that, after the original request is sent and booking is created successfully, the follow up actions (setMessageBarOpen &amp; setCreateBookingOpen) are not performed</strong> as the posting of original request is not under the function handleCreateBooking in bookingSaga.js</p>
  <p>axiosInstance.js</p>
  <pre><code>import axios from 'axios';
  import apiURL from &quot;requests/apiURL&quot;;
  
  const ax = axios.create();
  
  ax.interceptors.request.use(
      request =&gt; {
          const accessToken = JSON.parse(localStorage.getItem('token')) &amp;&amp; JSON.parse(localStorage.getItem('token')).accessToken;
          if (accessToken) {
            let auth = false;
            for (const [key, value] of Object.entries(apiURL)) {
              if (request.url.includes(value.url)) {
                auth = value.auth;
                break;
              }
            }
            if (auth) {
              request.headers.authorization = `Bearer ${accessToken}`;
            }
          }
          return request;
        },
        error =&gt; {
          return Promise.reject(error);
        }
  );
  
  const sendRefreshToken = (refreshToken) =&gt; {
      return new Promise((resolve, reject) =&gt; {
        console.log(&quot;refreshToken&quot;);
        postUrl(apiURL.token.url, { token: refreshToken })
          .then((res) =&gt; {
            console.log(res);
            if (res.data) {
              console.log(res.data);
              localStorage.setItem('token', JSON.stringify({accessToken: res.data.accessToken, refreshToken: refreshToken}));
              resolve(res);
            }
          })
          .catch(error =&gt; {
            reject(error);
          });
      })
    }
  
  ax.interceptors.response.use(
      (response) =&gt; {
          return response;
      },
      error =&gt; {
          console.log(&quot;axios.interceptors.response&quot;);
          console.log(error);
          const status = error.response ? error.response.status : null;
          const originalRequest = error.config;
          let isRefreshing = false;
    
           if (status === 403) {
            if (!isRefreshing) {
              const refreshToken = JSON.parse(localStorage.getItem('token')) &amp;&amp; JSON.parse(localStorage.getItem('token')).refreshToken;
              console.log(&quot;403, refreshToken:&quot;);
              console.log(refreshToken);
              isRefreshing = true;
              sendRefreshToken(refreshToken)
                .then(({ status }) =&gt; {
                  console.log(status);
                  if (status === 200 || status === 204) {
                      isRefreshing = false;
                      console.log(&quot;start resendRequest&quot;);
                      console.log(originalRequest);
                      return ax(originalRequest);
                  }
                })
                .catch(error =&gt; {
                  console.error(error);
                });
            }
          }       
          return error;
      }
  );
  
  export const getUrl = async (url, opt) =&gt; {
      const response = await ax.get(url, opt);
      return response;
  }
  
  export const postUrl = async (url, data, opt) =&gt; {
      const axios_res = await ax.post(url, data, opt);
      return axios_res;
  }
  
  </code></pre>
  <p>How should I handle the response from the resubmitted original request?
  Thanks.</p>