Где поставить валидацию проптипов?

Question

Я являюсь моей реакцией, я в фазе рефакторинга. Я хочу отделить редукционную часть от компонентов. Я не понимаю, где поставить валидацию проптипов? Следует ли проверять редуктивные реквизиты в файле контейнера, а реквизиты компонента должны проверяться на компоненте? Или оба компонента должны обрабатываться на компоненте? Или в контейнере? Вот мой код.

import React, { Component } from 'react';
import { withRouter } from 'react-router-dom'; 

import PropTypes from 'prop-types';
import {bindActionCreators} from 'redux';
import { connect } from 'react-redux';
import { registerUser } from '../../../actions';

import { TextFieldGroup } from '../../../components/UI';

class RegisterScreen extends Component {
   state = {
      name: '',
      email: '',
      password: '',
      password2: '', 
      errors: {}
   };

   componentDidMount() {
      if (this.props.auth.isAuthenticated) {
         this.props.history.push('./dashboard');
      }
   }

   componentWillReceiveProps(nextProps) {
      if (nextProps.errors) {
         this.setState({ errors: nextProps.errors });
      }
   }

   onChange = e => {
      this.setState({
         [e.target.name]: e.target.value 
      });
   }

   onSubmit = e => {
      e.preventDefault();

      const newUser = {
         name: this.state.name,
         email: this.state.email,
         password: this.state.password,
         password2: this.state.password2
      }

      this.props.registerUser(newUser, this.props.history);
   } 

   render() {
      const { errors } = this.state;

      return (
         <div className='register'>
            <div className='container'>
               <div className='row'>
                  <div className='col-md-8 m-auto'>

                     <h1 className='display-4 text-center'>Sign Up</h1>

                     <p className='lead text-center'>
                        Create Your Developer Connector Account
                     </p>

                     <form noValidate onSubmit={this.onSubmit}>
                        <TextFieldGroup 
                           className={errors.email}
                           placeholder="* Full Name" 
                           name="name" 
                           value={this.state.name}
                           onChange={this.onChange}
                           error={errors.name}
                        />

                        <TextFieldGroup 
                           type='email'
                           className={errors.email}
                           placeholder="* Email Address" 
                           name="email" 
                           value={this.state.email}
                           onChange={this.onChange}
                           error={errors.email}
                           info='This site uses Gravatar so if you want a profile image, use a Gravatar email'
                        /> 

                        <TextFieldGroup 
                           type='password'
                           className={errors.password}
                           placeholder="* Password" 
                           name="password" 
                           value={this.state.password}
                           onChange={this.onChange} 
                           error={errors.password}
                        /> 

                        <TextFieldGroup 
                           type='password' 
                           className={errors.password2}
                           placeholder="* Confirm Password" 
                           name="password2" 
                           value={this.state.password2}
                           onChange={this.onChange}
                           error={errors.password2}
                        /> 

                        <input type='submit' className='btn btn-info btn-block mt-4' />
                     </form>

                  </div>
               </div>
            </div>
         </div>
      );
   }
}

RegisterScreen.propTypes = {
   registerUser: PropTypes.func.isRequired,
   auth: PropTypes.object.isRequired,
   errors: PropTypes.object.isRequired
} 

const mapStateToProps = state => ({
   auth: state.auth,
   errors: state.errors
});

const mapDispatchToProps = dispatch => ({
   registerUser: bindActionCreators(registerUser, dispatch)
});

export default connect(mapStateToProps, mapDispatchToProps)(withRouter(RegisterScreen));

Answer 1

Вы должны определить PropTypes в компоненте, как в примере с ним. При принятии решения о том, когда использовать PropTypes для статической типизации, вы всегда должны защищать от входящих подпорок, которые могут напрямую повлиять на желаемый результат компонента при визуализации. Под этим я подразумеваю, что если для компонента требуются реквизиты «auth» или «errors», то вы должны определить PropTypes для компонента, получающего эти свойства, будь то через HoC в этом случае избыточный или любой другой режим передачи данных вниз.