Почему в моей программе дважды вызывается axios

Поскольку у меня нет доступа ко всему вашему коду (и я не могу его отлаживать), вот лучший подход к извлечению данных. Я структурировал его близко к тому, что у вас есть, и если вы последуете рабочему примеру, вы сможете устранить проблему.

Что я сделал:

1. onSubmit = {this.onSubmit} переименован в более стандартный декларативный метод this.handleSubmit.
2. Вызывается this.setState() в методе класса handleSubmit для удаления значения selectedOption, затем в обратном вызове setState называется getCurrentProfile(value, history) (замените value своим tempArray)
3. Поменял ваш <input type = "submit" ... /> на <button type = "submit" ... />
4. Добавлен return для вызова axios.get(...) (я также включил версию async/await для getCurrentProfile, которая может быть проще для понимания - также замените вызов axios.get на вызов axios.post)
5. Удален Redirect и вместо этого помещен перенаправление внутри создателя action как history.push('/'); (после успешной отправки запроса он перенаправляет пользователя обратно в "/" - в случае ошибки перенаправления нет)
6. Всегда сохраняйте состояние редукции как 1: 1. Другими словами, если это массив, то он остается массивом (нетnull), если это строка, он остается строкой (нетnumber) ... и т. д. При использовании PropTypes, ваше приложение будет выдавать ошибки, если вы не сохраните этот шаблон 1: 1. Например, вы изначально устанавливаете profile: null, а затем устанавливаете его как profile: [ Object, Object, Object ... ]. Вместо этого изначально должно быть: profile: [].
7. При использовании PropTypes избегайте неоднозначных типов, таких как object или array, и вместо этого опишите, как они структурированы.
8. Из-за природы redux и того, как вы настраиваете свой компонент, вам не нужно отправлять setProfileLoading. Вы можете просто обновить свои данные, и подключенный компонент React обновится, чтобы отразить новое изменение. Отправка двух действий redux по отдельности в течение короткого периода времени, скорее всего, приведет к миганию компонента (подумайте об этом как о вызове this.setState() дважды в секунду друг за другом - это приведет к миганию вашего компонента).

Рабочий пример: https://codesandbox.io/s/ovjq7k7516

SelectOption.js

import React, { Component } from "react";
import { connect } from "react-redux";
import PropTypes from "prop-types";
import { withRouter } from "react-router-dom";
import Select from "react-select";
import { clearCurrentProfile, getCurrentProfile } from "../actions";

const options = [
  { value: "todos?userId=1", label: "Todos" },
  { value: "comments?postId=1", label: "Comments" },
  { value: "users?id=1", label: "Users" },
  { value: "albums?userId=1", label: "Albums" }
];

class SelectOption extends Component {
  state = {
    selectedOption: []
  };

  handleSubmit = e => {
    e.preventDefault();
    const { getCurrentProfile, history } = this.props;
    const { value } = this.state.selectedOption;

    this.setState({ selectedOption: [] }, () =>
      getCurrentProfile(value, history)
    );
  };

  handleChangeEvent = selectedOption => this.setState({ selectedOption });

  render = () => (
    <div className = "container">
      <form onSubmit = {this.handleSubmit}>
        <Select
          value = {this.state.selectedOption}
          onChange = {this.handleChangeEvent}
          options = {options}
        />
        <div className = "save-button">
          <button type = "submit" className = "uk-button uk-button-primary">
            Save Preferences
          </button>
        </div>
        <div className = "clear-button">
          <button
            type = "button"
            onClick = {this.props.clearCurrentProfile}
            className = "uk-button uk-button-danger"
          >
            Reset Preferences
          </button>
        </div>
      </form>
    </div>
  );
}

export default connect(
  state => ({ profile: state.profile }),
  { clearCurrentProfile, getCurrentProfile }
)(withRouter(SelectOption));

SelectOption.propTypes = {
  clearCurrentProfile: PropTypes.func.isRequired,
  getCurrentProfile: PropTypes.func.isRequired,
  profile: PropTypes.shape({
    profile: PropTypes.arrayOf(PropTypes.object),
    profiles: PropTypes.arrayOf(PropTypes.object),
    loading: PropTypes.bool
  }).isRequired
};

действия / index.js

import axios from "axios";
import { GET_PROFILE, PROFILE_LOADING, CLEAR_CURRENT_PROFILE } from "../types";

//Get current profile
export const getCurrentProfile = (preference, history) => dispatch => {
  // dispatch(setProfileLoading()); // not needed 
  return axios
    .get(`https://jsonplaceholder.typicode.com/${preference}`)
    .then(res => {
      dispatch({
        type: GET_PROFILE,
        payload: res.data
      });
      // history.push("/") // <== once data has been saved, push back to "/"
    })
    .catch(err =>
      dispatch({
        type: GET_PROFILE,
        payload: { err }
      })
    );
};

//Get current profile (async/await)
// export const getCurrentProfile = (preference, history) => async dispatch => {
//   try {
//     dispatch(setProfileLoading()); // not needed

//     const res = await axios.get(
//       `https://jsonplaceholder.typicode.com/${preference}`
//     );

//     dispatch({
//       type: GET_PROFILE,
//       payload: res.data
//     });

//     // history.push("/") // <== once data has been saved, push back to "/"
//   } catch (e) {
//     dispatch({
//       type: GET_PROFILE,
//       payload: { e }
//     });
//   }
// };

//Profile Loading
export const setProfileLoading = () => ({ type: PROFILE_LOADING });
//Clear Profile
export const clearCurrentProfile = () => ({ type: CLEAR_CURRENT_PROFILE });

редукторы / index.js

import { combineReducers } from "redux";
import { CLEAR_CURRENT_PROFILE, GET_PROFILE, PROFILE_LOADING } from "../types";

const initialState = {
  profile: [],
  profiles: [],
  loading: false
};

const profileReducer = (state = initialState, { type, payload }) => {
  switch (type) {
    case PROFILE_LOADING:
      return {
        ...state,
        loading: true
      };
    case GET_PROFILE:
      return {
        ...state,
        profile: payload,
        loading: false
      };
    case CLEAR_CURRENT_PROFILE:
      return {
        ...state,
        profile: []
      };
    default:
      return state;
  }
};

export default combineReducers({
  profile: profileReducer
});