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).
Простой
Простой
Средний