Getting React and Redux React and Rails and Fetch and Safari to play nice.

example-action.js

export function saveOfficeStaff(section, staff) {
  return (dispatch, getState) => {
    const issue = getState().newsletterId;

    const theData = {
      staff: staff,
      section_id: section.id
    }

    fetch(`/api/newsletters/${issue}/office_staff`, {
      method: 'POST',
      credentials: 'include',
      body: JSON.stringify(theData),
      headers: {
        'Content-Type': 'application/json',
        'Accepts': 'application/json',
        'X-CSRF-Token': metaTagsManager.getCSRFToken(),
      }
    })

    // handle if 422

    .then( (response) => {

      if (response.ok) {
        dispatch(refreshNewsletter())
        dispatch(successMessage("Saved Correctly"))

      } else {
        response.json().then( (json) => {

          const errorSentences = Object.keys(json.errors).map( function(keyName) {
            return keyName + " " + json.errors[keyName].join(", ");
          });

          dispatch(errorMessage(errorSentences.join(". ")))
        })
      }

    })
  }

metaTagsManager.js

import _ from 'lodash';

export default {

  /**
   * Get CSRF Token from the DOM.
   *
   * @returns {String} - CSRF Token.
   */
  getCSRFToken() {
    const token = _.find(document.querySelectorAll('meta'), ['name', 'csrf-token']);
    return token ? token.content : null;
  },

};

package.json

    "exports-loader": "^0.6.3",
    "imports-loader": "^0.6.5",
    "whatwg-fetch": "^1.0.0"

webpack.config.babel.js

  plugins: [
    new webpack.ProvidePlugin({
      'fetch': 'imports?this=>global!exports?global.fetch!whatwg-fetch'
    })
  ],