Snippets for: How we connect Redux to our Services API article

actionCreatorAPI.js

const getFiles = () => ({
  type: API,
  path: '/files',
  onSuccess: addFiles,
});

actionCreatorRegular.js

const addFiles = (files) => ({
  type: ADD_FILES,
  payload: files,
});

apiMiddleware.js

const middleware = ({ dispatch, getState }) => (next) => (action) => {
  if (action.type !== API) {
    return next(action);
  }
const token = getState().user.token;
  const headers = new Headers({
    Authorization: `Bearer ${token}`,
  });
  // see how we use `action.path`. Which in our example is `/files`
  const url = `https://www.someurl.com/api${action.path}`;
  return fetch(url, { headers })
    .then((res) => res.json())
    // `action.onSuccess` was `addFiles` which is an Action Creator
    .then((data) => dispatch(action.onSuccess(data)));
}

asyncWithModule.js

const getFiles = () => async ({ dispatch }) => {
  const response = await services.getFiles();
  const files = await res.json();
  const finalAction = addFiles(files);
  return dispatch(finalAction);
};

firstAsync.js

const getFiles = () => async ({ dispatch, getState }) => {
  const token = getState().user.token;
  const headers = new Headers({
    Authorization: `Bearer ${token}`,
  });
  const url = 'https://www.someurl.com/api/files';
  const response = await fetch(url, { headers });
  const files = await res.json();
  const finalAction = addFiles(files);
  return dispatch(finalAction);
}

myFetchFactory.js

const myFetchFactory = () => (url, configuration) => {
  return fetch(url, configuration)
};
const myFetch = myFetchFactory();

myFetchFactoryFinal.js

const myFetchFactory = (store) => (url, configuration) => {
  const token = store.getState().user.token;
  const headers = new Headers({
    Authorization: `Bearer ${token}`,
  });
  const newConfiguration = {
    ...configuration,
    headers,
  };
  return fetch(url, newConfiguration);
};
  
const myFetch = myFetchFactory(store);

// Export `myFetch`
export default myFetch;

myFetchFactoryStore.js

import appStore from 'store';

const myFetchFactory = (store) => (url, configuration) => {
  return fetch(url, configuration)
};

const myFetch = myFetchFactory(store);

myFetchFirst.js

const myFetch = (url, configuration) => {
  return fetch(url, configuration)
};

servicersFirst.js

const services = {
  getFiles: () => {
    const url = 'https://www.someurl.com/api/files';
    return fetch(url);
  },
}

services.js

// Import our dependency
import myFetch from './myFetch';

const servicesFactory = (myFetch) => ({
  getFiles: () => {
    const url = 'https://www.someurl.com/api/files';
    return myFetch(url);
  },
});

const services = servicesFactory(myFetch);

uploadAsync.js

const uploadFile = (file) => async ({ dispatch }) => {
  const response = await services.getUploadUrl(file);
  const { newFile, uploadUrl } = await response.json():
  // we have a helper that upload a file to a URL
  await uploadFile(file, uploadUrl);
  // the polling starts
  let retries = 0;
  let exists = false;
  while (!exists || retries <= MAX_RETRIES) {
    exists = await services.fileExists(newFile.id);
    retries += 1;
  }
  if (!exists) {
    return dispatch(errorNotification('file did not upload successfully, please try again'))
  }
  return dispatch(addFile(newFile));
};