Как вы организовываете валидации в flux/react.js?

Question

[hadaev_ivan]

В моем проекте я использую react.js и что-то похоже на flux. Есть один громадный объект, который отвечает за состояние почти всего, диспатчер слушает события в компонентах и апдейтит этот объект, в следствии реакт рендерит изменения на страницу. Все понятно. Но когда дело дошло до сложных динамически генерируемых форм и сложных валидаций, возник вопрос как это все организовать? Ясное дело что сама валидация должна быть где-то рядом с диспатчером, но вот как грамотно донести эти ошибки до компонентов?

Answer 1

[123 123]

В идеале у вас должен быть компонент типа <InputValidator /> который оборачивает поле ввода и имеет в себе логику валидации. В этот компонент можно передать правила валидации (pattern, length, и т.д.), а на onChange уже делать dispatch и обновлять глобальное состояние.
Статус валидности можно передавать прямо в onChange, вторым параметром, после события, или добавлять в объект события.

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

Comments

[hadaev_ivan]

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

[123 123]

hogddttr27: Если нужно отобразить статус валидации прямо на самом поле, то, по результату ответа с сервера, вам нужно обновить статус в глобальном состоянии и передать его в компонент, что бы тот знал об ошибке.

[123 123]

О действиях пользователя и ответах с сервера можно думать как о некотором множестве способов вхождения. Все они могут изменять единственное значение в состоянии, если компонент должен одинаково реагировать на каждый из способов вхождения.

Answer 2

[ctpayc]

а мне вот эта библиотека понравилась https://github.com/christianalfoni/formsy-react

Answer 3

[IvanKalinin]

Для своих проектов использую свою библиотеку web-form-validator