React with redux-saga dispatch logout action on 401

Question

I have a React.JS SPA, made with redux-saga, handling user authentication with auth0's @auth0/auth0-spa-js library. I want to dispatch a LOGOUT action whenever my API returns the 401 error, perhaps after first trying for a refresh token.

The best place to do this IMHO is the HTTP handler. Mine looks like the below:

/**
 * Parses the JSON returned by a network request
 *
 * @param  {object} response A response from a network request
 *
 * @return {object}          The parsed JSON from the request
 */
function parseJSON(response) {
  if (response.status === 204 || response.status === 205) {
    return null;
  }
  return response.json();
}

/**
 * Checks if a network request came back fine, and throws an error if not
 *
 * @param  {object} response   A response from a network request
 *
 * @return {object|undefined} Returns either the response, or throws an error
 */
function checkStatus(response) {
  if (response.status >= 200 && response.status < 300) {
    return response;
  }

  const error = new Error(response.statusText);
  error.response = response;
  throw error;
}

/**
 * Requests a URL, returning a promise
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 *
 * @return {object}           The response data
 */
export default function request(url, options) {
  const headers = {
    Accept: 'application/json',
    'Content-Type': 'application/json',
    'Access-Control-Request-Headers': 'Content-Type, Authorization'
  };
  const token = localStorage.getItem('token');
  if (token) {
    headers['Authorization'] = `Bearer ${token}`;
  }
  const newOptions = {
    ...options,
    mode: 'cors',
    headers
  };
  return fetch(url, newOptions)
    .then(checkStatus)
    .then(parseJSON)
    .catch(err => {
      // check for 401 here and throw an action to clean the store and logout.
      if (err.response.status === 401) {
        // need to try to get a refresh token
        // if refresh did not work dispatch logout
        store.dispatch(logout);
      }
      throw err;
    });
}

My problem is accessing store.dispatch() from this code. I don't want to call configureStore(), as it would return a new store instance. Components have access to the store as we pass to them like the below:

const initialState = {};
const store = configureStore(initialState);
const MOUNT_NODE = document.getElementById('root');

const onRedirectCallback = appState => {
  history.push(
    appState && appState.targetUrl
      ? appState.targetUrl
      : window.location.pathname
  );
};

ReactDOM.render(
  <Auth0Provider
    domain={process.env.REACT_APP_AUTH0_DOMAIN}
    audience={process.env.REACT_APP_AUTH0_AUDIENCE}
    scope={'openid profile email'}
    client_id={process.env.REACT_APP_AUTH0_CLIENT_ID}
    redirect_uri={window.location.origin}
    onRedirectCallback={onRedirectCallback}
  >
    <Provider store={store}>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </Provider>
  </Auth0Provider>,
  MOUNT_NODE
);

How do I access it from the HTTP request handler without doing anything messed up like attaching the store to the window object?

Answer 1

You don't need to call configureStore. The value that you get from configureStore is the actual store. You can just export it and use it where ever you want:

export store = configureStore(initialState);

In some other file like your request handling:

import { store } from './where-you-make-store';

export default function request(url, options) {
  ...
  return fetch(url, newOptions)
    .then(checkStatus)
    .then(parseJSON)
    .catch(err => {
      // check for 401 here and throw an action to clean the store and logout.
      if (err.response.status === 401) {
        // need to try to get a refresh token
        // if refresh did not work dispatch logout
        store.dispatch(logout);
      }
      throw err;
    });
}

Here are some other choices in this article: https://daveceddia.com/access-redux-store-outside-react/