Islam Ibakaev

1) ты можешь использовать spread operator из-под коробки

вместо

case 'SWITCH_EDIT_MODE':
      return Object.assign({}, state, {
        editMode: action.value
      })

так

case 'SWITCH_EDIT_MODE':
      return { ...state, editMode: action.value}

2) weatherApiId спрятать в .env, а .env кинуть в .gitignore (dotenv-webpack to the rescue)

3)MainContainer на мой взгляд

import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import * as actionCreators from './../../actions/actionCreators';
import Main from './../Main/Main';

class MainContainer extends React.Component {

	componentDidMount() {
    this.props.actions.detectLocation();
  }

  render() {
  	return <Main {...this.props.store}  {...this.props.actions} />
  }
}

const mapStateToProps = state => ({ store: state })
const mapDispatchToProps = dispatch => ({ actions: bindActionCreators(actionCreators, dispatch) })

export default connect(mapStateToProps, mapDispatchToProps)(MainContainer)

и Main соответсвенно

import React from 'react';
import PropTypes from 'prop-types';

import styles from './Main.css';

import PageBackground from './../PageBackground/PageBackground';
import WeatherIcon from './../WeatherIcon/WeatherIcon';
import Temperature from './../Temperature/Temperature';
import Location from './../Location/Location';
import Loader from './../Loader/Loader';
import Error from './../Error/Error';

const propTypes = {
  pageBackground: PropTypes.string,
  location: PropTypes.object,
  editMode: PropTypes.bool,
  changeLocation: PropTypes.func,
  switchEditMode: PropTypes.func,
  weatherIcon: PropTypes.string,
  temperature: PropTypes.number,
  weatherDescription: PropTypes.string
};

export default function Main (props) {
  return (
    <div className={styles.container}>
      {props.loading && <Loader />}
      {props.loadingError && <Error>Sorry, an error occurred. Try to reload page</Error>}
      <PageBackground background={props.pageBackground} />
      <Location city={props.location.city}
        editMode={props.editMode}
        onLocationSelect={props.changeLocation}
        onChangeLocationClick={() => props.switchEditMode(true)}
        onInputBlur={() => props.switchEditMode(false)} />
      <div className={styles.split}>
       <WeatherIcon code={props.weatherIcon} class={styles.icon}/>
      	<span className={styles.date}>Today</span>
      </div>
      <Temperature value={props.temperature}/>
      <div className={styles.description}>props.weatherDescription}</div>
    </div>
  )
}

Main.propTypes = propTypes;

4) в идеале все компоненты кромеMainContainer должны (в этом проекте) быть functional components.

5) можно было бы написать больше редьюсеров(отдельный для получения location, для weather, для pagebackground) это позволило бы тебе "выдавить" логику из дочерних компонентов(PageBackground, Temperature, WeatherIcon) в MainContainer, чтобы представить в функуиональном виде

6) нужно ограничить кол-во запросов за определённый промужуток времени(например, 15минут), ибо погода не меняется так часто (express-rate-limit).

тебе нужно это

@media only screen and (max-width: 659px) {
	.sct_kontakt {
		flex-direction: column-reverse;
	}
}

также нужно убрать флоаты у дочерних элементов, раз уж ты флексбокс используешь.

твой пример здесь

p.s. будь так добр, выкладывай в песочницу сам