How to handle asynchronous errors in Flux?

Question

I worked with Flux and I really like it, but I have one point where I cannot figure out what would be the best solution. I made an application that processes the list of orders, and each order in the list is divided into different components, which can have a read / edit mode (basically, changing to a small form) and initiate an update (list of products in the order, delivery costs, etc. .).

Everything works fine, except when I have to handle exceptions from the server when updating an order (for example, the user changed one of the quantities of the product, but they are not enough, I want the component to show the form for this specific product for this particular order shows a built-in message so I have to bring the error message to a very specific component.The list can have up to 50 orders, and each order consists of 4-5 components that can trigger an update, so I ozhet be about 200 components, which may be potentially interested in ORDER_UPDATE_FAILED action.

The only two options that I can think of are as follows:

• So that the component calls the API update synchronously so that it can get an error if this happens (the updated order will be sent as the ORDER_UPDATED payload and continue the stream through the usual stream stream: dispatcher, storage, trigger update). But I know that it spoils the philosophy of fluxes a bit.

• Make an asynchronous update and create an ORDER_UPDATE_FAILED and a Store that has logic to put the error conversion into an object that can be identified by the component of the order part (thinking of orderID + errorID). This will preserve the unidirectional data cycle and asynchronous actions, but it will be too complicated and cumbersome and will add a few more problems:

  a) If the error is stored in the Repository, the component must notify the repository when the error is no longer valid, which may not always be possible).

  b) If the user clicks on save without changing the value, and the component enters the “boot state”, even if the call succeeds, the order remains the same, so no re-release is required to exit the “boot state”.

Has anyone found a more elegant way to solve this problem?

Answer 1

I think option 1 makes sense and is easier to manage if the error only relates to the scope of this component. I used this approach to display errors when submitting the form for things like registering users, where I know that the only place I need an error message is right on the form ("this username has already been accepted"). I view this error message as part of the component / component itself, a more local state than the state of the application. This is very similar to your situation, so I would say that this is the best option.

Option 2 would be more resilient to the possibility that the error may become relevant in more than one place in the future. But if you are sure that this is unlikely, I do not see the benefits of increasing complexity compared to option 1.