Компонент полей формы Redux и проверка

Я использую избыточность, чтобы скрывать и показывать компоненты на основе значения.

В документации по форме Redux упоминается следующее:

Подключение к нескольким полям следует использовать с осторожностью, так как это потребует повторной визуализации всего компонента каждый раз, когда любое из полей, к которым он подключен, изменяется. Это может быть узким местом в производительности. Если вам это абсолютно не нужно, вы должны подключаться к своим полям индивидуально с помощью .

Мне неясно, достаточно ли хорошо мое решение для скрытия и отображения полей на основе переключателей, чтобы использовать Fields с предупреждением об использовании с осторожностью.

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

Кроме того, как fields реализует проверки?

<div>
    <form>
      <Fields
       component={RadioButtonGroupField}
       names={['radioButtonGroup', 'nameTextField', 'nickNameTextField']}
      />
    </ form>
</div>

function RadioButtonGroupField(fields) {
    return(
      <div>
        <RadioButtonGroupComponent
          {...fields.radioButtonGroup.input}
          {...fields.radioButtonGroup.meta}
        />
        {
          (fields.radioButtonGroup.input.value === 'name' ||
          fields.radioButtonGroup.input.value === 'both') &&
          <NameTextFieldComponent
            {...fields.radioButtonGroup.input}
            {...fields.radioButtonGroup.meta}
          />
        }
        {
          (fields.radioButtonGroup.input.value === 'nickname' ||
          fields.radioButtonGroup.input.value === 'both') &&
           <NicknameTextFieldComponent
            {...fields.radioButtonGroup.input}
            {...fields.radioButtonGroup.meta}
          />
        }
      </div>
     );
  }

person eNddy    schedule 04.04.2017    source источник


Ответы (1)


Есть еще один способ сделать это, выбрав конкретное значение с помощью селекторов избыточной формы (http://redux-form.com/6.0.5/docs/api/Selectors.md/) из хранилища избыточности в вашем mapStateToProps, а затем условно отображать определенные компоненты.

Тем не менее, я думаю, что Fields - это именно то, что вам следует использовать в этом случае. Я думаю, что это предупреждение в основном предназначено для того, чтобы предупредить людей не идти и не помещать всю свою форму в поля, ререндеринг этих трех полей не имеет большого значения.

Мыслительный процесс, который привел к созданию Fields, вероятно, лучший способ понять это: https://github.com/erikras/redux-form/issues/841

person dpwr    schedule 05.04.2017
comment
Как мне реализовать проверки с использованием полей? - person eNddy; 06.04.2017
comment
Это хороший вопрос @eNddy! Я точно не знаю, что означает проверка Fields. Я уверен, что вы заметили, что аргумента проверки нет. Очевидным способом было бы просто использовать syncValidation: redux-form.com/6.6.1 /examples/syncValidation - person dpwr; 06.04.2017
comment
Я думал, что можно было бы иметь что-то вроде: <Fields component={RadioButtonGroupField} names={['radioButtonGroup', 'nameTextField', 'nickNameTextField']} validations={[radioButtonGroupValidation, nameTextFieldValidation, nickNameTextField]} /> . @dpwrussell, как вы думаете, что-то подобное возможно? Мне кажется, приятно не загрязнять глобальные асинхронные проверки? - person eNddy; 06.04.2017
comment
Я не пытаюсь проверить Fields в целом, вместо этого я пытаюсь добавить проверку для каждого отдельного компонента без использования глобальной синхронизации. - person eNddy; 06.04.2017
comment
Согласен, мой ответ был просто текущим состоянием. Есть 3 вещи, которые вы, возможно, захотите сделать правильно? 1) Проверить 3 поля независимо (т.е. 3 валидатора), 2) Проверить 3 поля вместе. Тот факт, что они представляют собой взаимодействующую группу, весьма вероятно, что вам нужно будет проверить их вместе. 3) Оба (1) и (2). Итак, в вашем примере это может быть 1, 3 или 4 валидатора в зависимости от того, что вы хотите сделать. Я бы посоветовал изложить этот вариант использования в выпуске на GitHub, так как я считаю это разумным улучшением форм. Fields довольно новый продукт, поэтому неудивительно, что в нем отсутствуют некоторые функции. - person dpwr; 06.04.2017