Реакция жизненного цикла, редукс и редукс-форма - PullRequest
Новая
       30

Реакция жизненного цикла, редукс и редукс-форма

0 голосов
/ 25 июня 2018

У меня есть компонент формы-редукса и другой компонент контейнера, который загружает данные apollo graphql. Здесь ниже только некоторые важные части кода.

КОМПОНЕНТ ФОРМЫ: 

class Form extends Component {

  constructor(props) {
    super(props);
    setTimeout(function() {
      this.executeCode ( 'onChangeInput', { action: 'initForm' , props: this.props, formProps: this.props, formState: this.state  });
    }.bind(this), 1000);
  }
  render() {
     (...)
  }
}
const ComponentWithData = reduxForm({
  form: nameForm, 
  validate,
})(Form);

function mapStateToProps(state, ownProps) {
  const log = false;
  const statesReturn = { myState: state };
  let initialValues;
  initialValues = processValues(ownProps, tableCrud, ownProps.data, 'toClient','view' );
  statesReturn.initialValues = initialValues ;
  return statesReturn;
}

const ComponentWithDataAndState = connect(
  mapStateToProps,
  null,
)(ComponentWithData);

export default ComponentWithDataAndState;

КОМПОНЕНТ КОНТЕЙНЕРА: 

class FormContainer extends Component {

  render() {


    const { t, ...otherProps} = this.props;
    let aElements = [];
    let aQlFiltered = {"crud_view_payment":{"table":"payment"}}; 
    const resultCheck = checkLoadCrud (aQlFiltered,this.props);
    if (resultCheck.messageError) {
      return <MsgError msg={resultCheck.messageError} t={this.props.t} />;
    }

    if (!resultCheck.globalLoading && !resultCheck.messageError) {
      if (this.props['crud_view_'+tableCrud] && this.props['crud_view_'+tableCrud][tableCrud]) {
        if (this.props['crud_view_'+tableCrud][tableCrud].deleted) {
    aElements.push(<RecordHeadInfo  
      key="recordhead"
      tableCrud={tableCrud} 
      {...this.props} 
      data={this.props['crud_view_'+tableCrud][tableCrud]} 
      />);
        }
      }
    }

    if (!resultCheck.globalLoading && !resultCheck.messageError) {
      aElements.push(<Form
        crudAction="View"
        key="mainform"
        id={ this.props.match.params.id }
      data={this.props['crud_view_'+tableCrud][tableCrud]}
        onSubmit={this.handleSubmit}
        containerPropsForm={this.props}
        t={this.props.t}
      />);
    }


    }
    return (
      <div>
        {aElements}
      </div>
    );

  }
}



const withGraphqlandRouter = compose(

  graphql(defQls.payment.View, {
    name: 'crud_view_payment',
    options: props => {
      const optionsValues = { variables: {id: props.match.params.id, _qlType: 'View' }};
      optionsValues.fetchPolicy = Tables[tableCrud].fetchPolicy ? Tables[tableCrud].fetchPolicy :'network-only';
      return optionsValues;
    },
  }),
)(withRouter(FormContainer));


const mapStateToProps = (state) => {
  return {
    myState: state,
  };
};


const mapDispatchToProps = (dispatch) => {
  return bindActionCreators ({ appSubmitStart,  appSubmitStop, showConfirm, initialize, dispatch }, dispatch );  // to set this.props.dispatch
};

const withState = connect(
  mapStateToProps ,
  mapDispatchToProps,
)(withGraphqlandRouter);



const ComponentFull = withState; 

export default ComponentFull;

в компоненте формы У меня есть setTimeout, который выполняет код, потому что мне нужно установить отключить или скрытое поле в соответствии с загруженными данными. Я не могу сделать это непосредственно на construct () и componentDidMount (), потому что, если я пытаюсь извлечь данные из redux: this.props.myState.form (не имеет значений). это для этого тайм-аута, с 1000 в порядке, и с 1 миллисекундой это тоже хорошо, я вижу this.props.myState.form.myForm.values ​​(с данными, полученными из db через apollo), я предпочитаю 1 миллисекунду, конечно, потому что я не вижу мерцающих полей, которые отключаются или исчезают, но я не уверен, что это хорошая практика, потому что в медленном компьютере или медленном браузере, который может вызвать конфликт с рендером?

Непонятно, как происходит реакция смешивания в течение жизненного цикла, редукс, аполлон и редукс-форма; у кого-нибудь есть идеи, как я могу лучше заказать мои идеи, чтобы написать лучший код здесь?

...