Developing a React/Alt application, I face a quite common scenario:
In the root component, in a button click handler, I need to check if a value in a specific store is valid before triggering an action. This value is not yet available in the state of the store since it has to be calculated.
So I have to call an action linked on the method of the store which going to calculate the value. The result will be stored in the state of the store and will be available in the listen-handler of the root component.
Unfortunately, in this case, I lose the initial context of the user action.
I'd like to synchronously calculate the value and retrieve it in the same context. Is there a way to do it? What are the best practices in such a scenario?
You can split your validation logic up into a separate module. On the
onClick handler you can then execute this validation logic, using either
store.getState() or the props of your component. The validation logic will then be separate from your component, which makes it easy to test and re-use, plus it won't clutter your component, which should be more concerned with behavior of the interface.