Eu tenho um aplicativo react / redux que busca um token de um servidor api. Depois que o usuário se autenticar, eu gostaria que todas as solicitações de axios tivessem esse token como um cabeçalho de autorização sem precisar anexá-lo manualmente a todas as solicitações da ação. Sou bastante novo para reagir / redux e não tenho certeza da melhor abordagem e não estou encontrando nenhum resultado de qualidade no google.

Aqui está minha configuração de redux:

// actions.js
import axios from 'axios';

export function loginUser(props) {
  const url = `https://api.mydomain.com/login/`;
  const { email, password } = props;
  const request = axios.post(url, { email, password });

  return {
    type: LOGIN_USER,
    payload: request
  };
}

export function fetchPages() {
  /* here is where I'd like the header to be attached automatically if the user
     has logged in */ 
  const request = axios.get(PAGES_URL);

  return {
    type: FETCH_PAGES,
    payload: request
  };
}

// reducers.js
const initialState = {
  isAuthenticated: false,
  token: null
};

export default (state = initialState, action) => {
  switch(action.type) {
    case LOGIN_USER:
      // here is where I believe I should be attaching the header to all axios requests.
      return {
        token: action.payload.data.key,
        isAuthenticated: true
      };
    case LOGOUT_USER:
      // i would remove the header from all axios requests here.
      return initialState;
    default:
      return state;
  }
}

Meu token é armazenado no repositório redux emstate.session.token.

Estou um pouco perdido sobre como proceder. Eu tentei fazer umainstância axios em um arquivo no meu diretório raiz e atualize / importe isso em vez de node_modules, mas ele não anexará o cabeçalho quando o estado mudar. Quaisquer comentários / idéias são muito apreciados, obrigado.