Error creating redux middleware to add header param to axios request

223 views Asked by At

I'm trying automatically add to all axios requests an access token and I'm using (or trying to) a middleware. But I'm getting the following error: 'store' implicitly has type 'any' because it does not have a type annotation and is referenced directly or indirectly in its own initializer.

store/index.ts

import { configureStore } from '@reduxjs/toolkit';
import { routerMiddleware } from 'connected-react-router/immutable';
import { createBrowserHistory } from 'history';
import { setIsAxiosAuthorized } from './middlewares';
import createRootReducer from './reducers';

export const history = createBrowserHistory();

export const store = configureStore({
  reducer: createRootReducer(history),
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware().concat(
      routerMiddleware(history),
      setIsAxiosAuthorized
    ),
});

// Infer the `RootState` and `AppDispatch` types from the store itself
export type RootState = ReturnType<typeof store.getState>;

export type AppDispatch = typeof store.dispatch;

middlewares.ts

import { authManager } from 'src/features/auth/authManager';
import { authActions } from 'src/features/auth/redux';
import { RootState } from '.';

export const setIsAxiosAuthorized = (store: RootState) => (next) => (
  action
) => {
  authManager.setAxiosAuthorizationToken();
  store.dispatch(authActions.setIsAxiosAuthorized(true));
  return next(action);
};

Is my middleware incorrect? How can I make it typed (I've tried different approaches from StackOverflow, but they are causing different errors)?

0

There are 0 answers