Axios itself doesn’t handle abort cases, smart terminations, throttling caching, and so on, which we can do with @redux-Requests. Take a look

For those not familiar with @redux-requests, see my last article for some advanced uses of redux

Here is a normal code for Redux-Requests configuration. To handle failures, just add a code, and the corresponding store code could look like this.

import axios from 'axios';

const axiosInit = axios.create({
  baseURL: API_BASE,
});
axiosInit.interceptors.response.use(response= > {
  // token invalid
  if ([-1, -2].includes(response.data? .errorCode)) { store.dispatch(abortRequests()); store.getState().login.outLogin(); }return response;
});
const { requestsReducer, requestsMiddleware } = handleRequests({
  driver: {
    default: createDriver({
      processResponse: response= > ({ data: response }),
    }),
    axiosSmartchain: createAxiosDriver(axiosInit),
  },
});
const rootReducer = combineReducers({
  requests: requestsReducer,
  login: loginReducer,
});
export const store = configureStore({
  reducer: rootReducer,
  middleware: [
    ...requestsMiddleware,
  ],
});

export type AppDispatch = typeof store.dispatch;
export type RootState = ReturnType<typeof store.getState>;
Copy the code

As you can see from the above code, there are only two processes for the invalid token, one is to abort the request and the other is to exit the login.

store.dispatch(abortRequests());
store.getState().login.outLogin();
Copy the code

Each page may be different or the same, but they all have one feature that is no longer dependent on the data that needs to be logged in, so the data can be removed. For the cancellation of data, it is all cancelled. If it is more advanced, The mode of cancellation with positivity is dispatch(abortRequests(actions. Map (e => e.tostring ()))))

The abortRequests property is a nice thing, it doesn’t cancel the request, it just cancels the request if it can be cancelled, and if the request completes but doesn’t respond, it rejects the response, which is not the same thing as ABORT. Axios doesn’t have this capability itself, axios can only cancel the request, But you cannot cancel the response.

For outLogin, I put store because the exit operation depends on hooks, which cannot be called directly.

loginReducer.ts

import { createSlice } from '@reduxjs/toolkit';

const loginSlice = createSlice({
  name: 'login'.initialState: {
    outLogin: () = > {
      // await init function}},reducers: {
    setOutLogion: (state, action) = >{ state.outLogin = action.payload; ,}}});export const { setOutLogion } = loginSlice.actions;

const loginReducer = loginSlice.reducer;
export default loginReducer;

Copy the code

The exit function is set in the exit action of a common component

const outLogin = useCallback(() = > {
    localStorage.clear();
    deactivate();
    handleDisconnect && handleDisconnect();
  }, [deactivate, handleDisconnect]);

  useEffect(() = > {
    dispatch(setOutLogion(outLogin));
  }, [dispatch, outLogin]);
Copy the code

The reason to use abort mode is so that the implementation does not need to consider whether the normal state, as shown below. GetData, you can use the ID function directly.

export const fetchItem = createSmartAction< RequestAction<IApiNFTDetails, INFTDetails> >('fetchItem', (params: { contract: string; id: number }, meta) => ({ request: { url: '/api/v2/main/auth/getoneitembyid', method: 'post', data: { ct: params.contract, id: params.id }, }, meta: { getData: _.id, auth: true, driver: 'axiosSmartchain', asMutation: false, ... meta, }, }));Copy the code

– the –