Какая разница в импорте axios в createAsyncThunk?

Приветствую! Подскажите пожалуйста, в чем разница использования axios'a в createAsyncThunk через прямой импорт объекта из create-api.ts или через экстра-аргумент thunkApi.extra?

create-api.ts

export const createAPI = (onUnauthorized: UnauthorizedCallback): AxiosInstance => {
  const axiosConfig = axios.create({
    baseURL: BACKEND_URL,
    timeout: REQUEST_TIMEOUT,
  });

  axiosConfig.interceptors.request.use((config: AxiosRequestConfig) => {
    const token = getAuthToken();

    if (token) {
      config.headers['x-token'] = token;
    }

    return config;
  });

  axiosConfig.interceptors.response.use(
    (response: AxiosResponse) => response,
    (error: AxiosError) => {
      const { response } = error;

      if (response?.status === HttpCode.Unauthorized) {
        return onUnauthorized();
      }

      return Promise.reject(error);
    },
  );


store.ts

const store = configureStore({
  reducer: rootReducer,
  devTools: true,
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({
      thunk: {
        extraArgument: { api },
      },
    }).concat(redirect),
});


movie.slice.ts

export const getAllMovies = createAsyncThunk<
  Movie[],
  void,
  {
    extra: { api: AxiosInstance };
  }
>('movie/getAllMovies', async (_, thunkApi) => {
  const api = thunkApi.extra.api;
  const { data } = await api.get<ApiMovieData[]>(AppRoutes.Movies);
  const adaptedData = data.map((movie) => adaptMovieDataToClient(movie));

  return adaptedData;
});



Если импортировать объект api из create-api.ts и через него делать запрос, дополнительно в компоненте нужно вызывать метод .unwrap() у dispatch. Если импортировать axios через thunkApi.extra, то нужно указывать дополнительно типы у createAsyncThunk и создавать переменную. Не могу понять как лучше делать, и есть ли разница в подходах.
  • Вопрос задан
  • 245 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы