agent.js

import axios from 'axios';
import { dispatch } from 'store';

/**
 * Create one instance of Axios HTTP request object
 * including access token if exists
 * using interceptor
 */
function createInstance() {
  const defaultConfig = {
    baseURL: API_URL,
  };

  const instance = axios.create(defaultConfig);
  instance.interceptors.request.use((config) => {
    dispatch.app.loading();
    const token = window.localStorage.getItem('token');
    const cfg = Object.assign({}, config);
    cfg.headers.Authorization = token || '';
    return cfg;
  });

  instance.interceptors.response.use((response) => {
    dispatch.app.stopLoading();
    return response;
  }, (error) => {
    if (!error.response) {
      dispatch.snackbar.setWarning('Shit happens');
    } else if (error.response.status === 401) {
      dispatch.auth.logout();
      window.localStorage.removeItem('token'); // remove token
      dispatch.app.loading();
    // lots of conditional here with dispatch props round here
    } else {
      dispatch.snackbar.setError('Very bad shit happens');
    }
    dispatch.app.stopLoading();
    return Promise.reject(error);
  });

  return instance;
}

export default createInstance();

api.js

import agent from './agent'

export function fetchSumthin() {
    return agent.get('/sumthin');
}

model.js

import api from './api';

export const app = {
  state: {
    loading: false,
  },
  reducers: {
    loading: () => ({ loading: true }),
    stopLoading: () => ({ loading: true })
  },
}

export const snackbar = {
  state: {
    showSnackbar: false,
    message: '',
  },
  reducers: {
    setWarning: (message) => ({
      showSnackbar: true,
      message,
      type: 'warning'
    }),
    setError: (message) => ({
      showSnackbar: true,
      message,
      type: 'error',
    }),
    close: () => ({
      showSnackbar: true,
    }),
  },
};

export const someBusinessLogic = {
  state: {
    someData: null,
  },
  effects: {
    fetchData: () {
      const { data } = api.fetchSumthin();
      return {
        someData: data,
      };
    }
  }
};

store.js

import { init } from '@rematch/core';

import * as models from './models';

export const store = init({
  redux: {
    devtoolOptions: {
      disabled: !ENABLE_REDUX_DEVTOOLS,
    },
  },
  models,
});

export const { dispatch, getState } = store;