Приветствую! Подскажите пожалуйста, в чем разница использования 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
и создавать переменную. Не могу понять как лучше делать, и есть ли разница в подходах.