Как получить доступ к первозданной опоре reduxForm из состояния Redux?

Я использую несколько экземпляров Field redux-form внутри своей формы с TextField redux-form-material-ui в качестве визуализируемого компонента:

<Field
     component={TextField}
     floatingLabelText='Title:'
     name='title'
/>

Когда компонент, в котором находится форма, оборачивается с помощью reduxForm (), мы получаем props.pristine, props.dirty и т. Д. Внутри этого компонента.

Однако я хочу выполнить некоторые действия, в зависимости от значения pristine, в другом компоненте, отличном от reduxForm ИЛИ состоянии Redux, но я не могу этого сделать.

Я попытался передать его как опору в Field:

<Field
    component={TextField}
    floatingLabelText='Title:'
    name='title'
    pristine={props.pristine}
/>

Но свойство pristine по-прежнему не появляется ни как опора внутри state.form.formName, ни как опора внутри state.form.formName.registeredFields.title:

Вопрос:
Есть ли способ получить свойство pristine моей формы внутри другого компонента или внутри состояния redux?


reactjs redux material-ui redux-form
person Eduard    schedule 22.02.2018    source источник

Ответы (2)


arrow_upward
2
arrow_downward

Обновление: обновление до 7.4.2. решает проблему!

import { connect } from 'react-redux';
import { isPristine } from 'redux-form'

Что вам нужно сделать: подключиться к redux-form-state и получить к нему доступ

const mapStateToProps = state => ({
  isPristine: isPristine('yourFormName')(state), // Checks whole form
  isPristine: isPristine('yourFormName')(state, ["fieldName"]), // Checks particular field
}); connect(mapStateToProps)

Вы можете получить к нему доступ с помощью this.props.isDirty и передать его желаемому компоненту.

person srinatht    schedule 29.11.2018

arrow_upward
0
arrow_downward

Обработка этого из промежуточного программного обеспечения, вероятно, будет самой простой реализацией проверки состояния между формами, проверки по form.config.values ​​и form.config.initialValues ​​при изменении формы redux.

const formMiddleware = () => store => next => action => {
  const state = store.getState()
  switch(action.type) {
    case '@@redux-form/CHANGE':
      store.dispatch({ type: UPDATE_OTHER_FORM, message: Object.is(state.form.config.values, state.form.config.initial) });
      break;
  }
  next(action)
}

Альтернативный вариант (на основе варианта использования) - обработать вашу форму через состояние нетронутой, изменить вызов в зависимости от состояния опоры и передать ее:

<Button
  btnName={pristine ? "Action1" : "Action2"}
  type="submit"
  action={props.handleSubmit(values => {
    onSubmit(
      pristine ?
      {
        ...values,
        call: 'action1'
      } : {
        ...values,
        call: 'action2'
      }
    )
  })}
/>

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

handleSubmit = (values) => {
  if(values.call === 'action1') { 
    this.props.actions.action1(values);
  } else if(values.call === 'action2') {
    this.props.actions.action2(values);
  }
}

Надеюсь, что это поможет в вашей конкретной реализации, даже если вы ищете способы вывести изначальное состояние за пределы формы. Вы также можете связать состояние через них с другими формами, но когда я изучал это в прошлом году, выдвинуть состояние за пределы формы было просто невозможно.

person DBrown    schedule 24.05.2018