Setup axios instance from env and use in thunk middleware

.eslintrc.js

@@ -74,5 +74,6 @@ module.exports = {
   },
   globals: {
     __IS_DEV__: true,
+    __API__: '',
   },
 };

.vscode/settings.json

@@ -2,13 +2,11 @@
   "i18n-ally.localesPaths": ["public/locales", "src/shared/config/i18n"],
   "i18n-ally.keystyle": "nested",
   "i18n-ally.sourceLanguage": "ru",
-  // "editor.defaultFormatter": "dbaeumer.vscode-eslint",
-  // "editor.formatOnSave": true,
-  // "eslint.format.enable": true,
   "editor.codeActionsOnSave": {
     "source.fixAll.eslint": "explicit",
     "source.fixAll.stylelint": "explicit",
     "source.fixAll.prettier": "explicit",
+    "source.organizeImports": "explicit"
   },
   "eslint.validate": ["javascript"],
   "css.validate": false,
@@ -17,4 +15,11 @@
   "editor.formatOnSave": true,
   "jest.jestCommandLine": "npm run test:unit --",
   "prettier.configPath": ".prettierrc",
+  "typescript.inlayHints.parameterNames.enabled": "all",
+  "typescript.inlayHints.parameterTypes.enabled": true,
+  "typescript.inlayHints.variableTypes.enabled": true,
+  "typescript.inlayHints.functionLikeReturnTypes.enabled": true,
+  "editor.inlayHints.fontSize": 13,
+  "editor.inlayHints.maximumLength": 55,
+  "editor.inlayHints.enabled": "onUnlessPressed"
 }

config/build/buildPlugins.ts

@@ -4,7 +4,7 @@ import { DefinePlugin, ProgressPlugin, WebpackPluginInstance } from 'webpack';
 import ReactRefreshWebpackPlugin from '@pmmmwh/react-refresh-webpack-plugin';
 import { BuildOptions } from './types/config';
 
-export function buildPlugins({ paths, isDev }: BuildOptions): WebpackPluginInstance[] {
+export function buildPlugins({ paths, isDev, apiUrl }: BuildOptions): WebpackPluginInstance[] {
   const plugins = [
     new HtmlWebpackPlugin({
       template: paths.html,
@@ -16,6 +16,7 @@ export function buildPlugins({ paths, isDev }: BuildOptions): WebpackPluginInsta
     }),
     new DefinePlugin({
       __IS_DEV__: JSON.stringify(isDev),
+      __API__: JSON.stringify(apiUrl),
     }),
   ];
 

config/build/types/config.ts

@@ -1,20 +1,22 @@
-export type BuildMode = 'production' | 'development'
+export type BuildMode = 'production' | 'development';
 
 export interface BuildPaths {
-  entry: string,
-  build: string,
-  html: string,
-  src: string,
+  entry: string;
+  build: string;
+  html: string;
+  src: string;
 }
 
 export interface BuildEnv {
-  port: number,
-  mode: BuildMode,
+  port: number;
+  mode: BuildMode;
+  apiUrl: string;
 }
 
 export interface BuildOptions {
-  mode: BuildMode,
-  paths: BuildPaths,
-  isDev: boolean,
-  port: number,
+  mode: BuildMode;
+  paths: BuildPaths;
+  isDev: boolean;
+  port: number;
+  apiUrl: string;
 }

config/jest/jest.config.ts

@@ -53,6 +53,7 @@ export default {
   // A set of global variables that need to be available in all test environments
   globals: {
     __IS_DEV__: true,
+    __API__: '',
   },
   transformIgnorePatterns: ['node_modules/(?!axios)'],
 

config/storybook/webpack.config.ts

@@ -1,6 +1,6 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import webpack, { DefinePlugin } from 'webpack';
 import path from 'path';
+import webpack, { DefinePlugin } from 'webpack';
 import { buildCssLoader } from '../build/loaders/buildCssLoader';
 import { BuildPaths } from '../build/types/config';
 
@@ -31,7 +31,8 @@ export default ({ config }: {config: webpack.Configuration}) => {
   config.module!.rules!.push(buildCssLoader(true));
 
   config.plugins!.push(new DefinePlugin({
-    __IS_DEV__: true,
+    __IS_DEV__: JSON.stringify(true),
+    __API__: JSON.stringify(''),
   }));
 
   return config;

src/app/providers/StoreProvider/config/StateSchema.ts

@@ -1,18 +1,23 @@
 import {
-  AnyAction, CombinedState, EnhancedStore, Reducer, ReducersMapObject,
+  AnyAction,
+  CombinedState,
+  EnhancedStore,
+  Reducer,
+  ReducersMapObject,
 } from '@reduxjs/toolkit';
+import { AxiosInstance } from 'axios';
 import type { CounterSchema } from 'entities/Counter';
 import { ProfileSchema } from 'entities/Profile';
 import { UserSchema } from 'entities/User';
 import { LoginSchema } from 'features/AuthByUsername';
 
 export interface StateSchema {
-  counter: CounterSchema,
-  user: UserSchema,
+  counter: CounterSchema;
+  user: UserSchema;
 
   // Async reducers
-  login?: LoginSchema,
-  profile?: ProfileSchema,
+  login?: LoginSchema;
+  profile?: ProfileSchema;
 }
 
 export type StateSchemaKey = keyof StateSchema;
@@ -27,3 +32,17 @@ export interface ReducerManager {
 export interface ReduxStoreWithManager extends EnhancedStore<StateSchema> {
   reducerManager: ReducerManager;
 }
+
+/** Тип для extraArgument миддлвара thunk в createReduxStore()  */
+export interface ThunkApiArg {
+  api: AxiosInstance;
+}
+
+/**
+ * Тип конфига для всех thunk, включает тип для данных при ошибке и тип для прокинутого extraArgument.
+ * @template T - Тип данных, которые могут быть возвращены в случае отказа (reject).
+ */
+export interface ThunkConfig<T> {
+  rejectValue: T;
+  extra: ThunkApiArg;
+}

src/app/providers/StoreProvider/config/store.ts

@@ -1,12 +1,13 @@
 import { configureStore, ReducersMapObject } from '@reduxjs/toolkit';
 import { counterReducer } from 'entities/Counter';
 import { userReducer } from 'entities/User';
+import { $api } from 'shared/api/api';
 import { createReducerManager } from './reducerManager';
 import type { StateSchema } from './StateSchema';
 
 export function createReduxStore(
   initialState?: StateSchema,
-  asyncReducers?: ReducersMapObject<StateSchema>,
+  asyncReducers?: ReducersMapObject<StateSchema>
 ) {
   const rootReducer: ReducersMapObject<StateSchema> = {
     ...asyncReducers,
@@ -16,10 +17,12 @@ export function createReduxStore(
 
   const reducerManager = createReducerManager(rootReducer);
 
-  const store = configureStore<StateSchema>({
+  const store = configureStore({
     reducer: reducerManager.reduce,
     devTools: __IS_DEV__,
     preloadedState: initialState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({ thunk: { extraArgument: { api: $api } } }),
   });
 
   // @ts-ignore

src/app/providers/StoreProvider/index.ts

@@ -1,3 +1,7 @@
-export type { StateSchema, ReduxStoreWithManager } from 'app/providers/StoreProvider/config/StateSchema';
+export type {
+  ReduxStoreWithManager,
+  StateSchema,
+  ThunkConfig,
+} from 'app/providers/StoreProvider/config/StateSchema';
+export { AppDispatch, createReduxStore } from './config/store';
 export { StoreProvider } from './ui/StoreProvider';
-export { createReduxStore, AppDispatch } from './config/store';

src/app/types/global.d.ts

@@ -11,3 +11,4 @@ declare module '*.svg' {
 }
 
 declare const __IS_DEV__: boolean;
+declare const __API__: string;

src/features/AuthByUsername/model/services/loginByUsername/loginByUsername.ts

@@ -1,5 +1,5 @@
 import { createAsyncThunk } from '@reduxjs/toolkit';
-import axios from 'axios';
+import { ThunkConfig } from 'app/providers/StoreProvider';
 import { User, userActions } from 'entities/User';
 import { USER_LOCAL_STORAGE_KEY } from 'shared/const/localStorage';
 
@@ -8,19 +8,21 @@ interface LoginByUsernameProps {
   password: string;
 }
 
-export const loginByUsername = createAsyncThunk<User, LoginByUsernameProps, {rejectValue: string}>(
-  'login/loginByUsername',
-  async (authData, { rejectWithValue, dispatch }) => {
-    try {
-      const response = await axios.post('http://localhost:8000/login', authData);
-      if (!response.data) {
-        throw new Error();
-      }
-      localStorage.setItem(USER_LOCAL_STORAGE_KEY, JSON.stringify(response.data));
-      dispatch(userActions.setAuthData(response.data));
-      return response.data;
-    } catch (error) {
-      return rejectWithValue('error');
+export const loginByUsername = createAsyncThunk<
+  User,
+  LoginByUsernameProps,
+  ThunkConfig<string>
+>('login/loginByUsername', async (authData, thunkApi) => {
+  const { rejectWithValue, dispatch, extra } = thunkApi;
+  try {
+    const response = await extra.api.post('/login', authData);
+    if (!response.data) {
+      throw new Error();
     }
-  },
-);
+    localStorage.setItem(USER_LOCAL_STORAGE_KEY, JSON.stringify(response.data));
+    dispatch(userActions.setAuthData(response.data));
+    return response.data;
+  } catch (error) {
+    return rejectWithValue('error');
+  }
+});

src/shared/api/api.ts

@@ -0,0 +1,7 @@
+import axios from 'axios';
+import { USER_LOCAL_STORAGE_KEY } from 'shared/const/localStorage';
+
+export const $api = axios.create({
+  baseURL: __API__,
+  headers: { authorization: localStorage.getItem(USER_LOCAL_STORAGE_KEY) },
+});

webpack.config.ts

@@ -13,12 +13,15 @@ export default (env: BuildEnv) => {
 
   const mode = env.mode || 'development';
   const PORT = env.port || 3001;
+  const apiUrl = env.apiUrl || 'http://localhost:8100';
+
   const isDev = mode === 'development';
 
   const config: Configuration = buildWebpackConfig({
     mode,
     paths,
     isDev,
+    apiUrl,
     port: PORT,
   });