D
D
Di Buz2015-11-25 00:31:11
React
Di Buz, 2015-11-25 00:31:11

How not to break the flux concept by doing form validation on the server side?

In FLUX all data should only go in one direction [component] -> [dispatcher] -> [store] -> [new data to component]
I have a simple problem. There is a form for editing an order and a list of orders.
The cycle is simple: fill out the form, click add -> [event: create order] -> the dispatcher redirects it to the order storage -> [event in the storage about changes] -> re-rendering the list of orders.
Everything is simple and everything works.
And now to complicate things, we need to validate the order form on the server. When the form has created an event about adding an order, the event intercepts WebAPI and sends it to the server, and if everything is fine, then the event goes to the dispatcher and storage. But if everything is bad and the data is not valid, how to inform the form component about this? In revenge with the event, send a callback to return in case of errors back to the form, then the data no longer goes in one direction.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Andrey Antropov, 2015-11-25
@Tpyn666

The solution to this is to use something to manage forms that contains form data and validation statuses, for example look at
https://github.com/christianalfoni/formsy-react
https://github.com/erikras/redux-form
The last one is like more interesting to me

V
vsuhachev, 2015-11-25
@vsuhachev

The solution is simple - next to the order data in the store, store also error data for this order. If the api returned validation errors, then store them in the store (this will cause the component to re-render and display errors). When the component is deinitialized, as well as when the call to the api is successfully completed, clean up errors in the store.

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question