Приложение с большой реакцией-редукцией

Question

Я работаю над переписыванием одного из модулей в своей компании с помощью реакции, модуль представляет собой одну страницу, состоящую из 4-5 разных форм, выбор, сделанный в каждой форме, затем определяет видимость следующего шага формы.

Существует много «статических» полей ввода, которые не влияют на визуальное состояние приложения, но необходимы для отправки на сервер, другие входы меняют состояние ui.

Я ищу подходящий подход для приложений такого типа, поскольку он кажется прикрепленным к событиюChange к каждому входу (на всей странице содержится более 100 входов). Я использовал плагины-редукторы, но для меня это слишком много, потому что мне нужно иметь прямой доступ к состоянию и принимать решение на его основе. Я бы предпочел бы больше контролировать государство.

Правильное решение для привязки событияChange для каждого входа? Или есть лучший подход.

Answer 1

Мы делаем это с redux-form довольно легко. Потому что все, поддержива в fields реквизита, вы могли бы сделать что-то вроде этого:

const Form = ({ 
    fields, 
    handleSubmit, 
    saveForm 
}) => (
    <form onSubmit={handleSubmit(saveForm)}> 
    <fieldset> 
     <input type="text" {...fields.hasAlternativeDelivery} /> 
    </fieldset> 
    {fields.hasAlternativeDelivery.value === true && 
     <fieldset> 
     {/* more fields go here */} 
     </fieldset> 
    } 
    </form> 
); 

Затем мы условно проверить некоторые fieldsets like this. Итак, чтобы ответить на ваш вопрос: вы не должны полагаться на события изменений, чтобы скрыть/показать определенные поля, это противоречит самой природе Реагирования (Реагирование декларативно, то, что вы описываете, является императивным способом делать вещи). Вместо этого выясните, какое состояние (/ реквизит) должно привести к тому, что пользовательский интерфейс.