Who says that an Action is allowed in Flux? - reactjs-flux

Question

I'm trying to use Flux architecture into one of my projects.
Some of my Actions have pre-requisites that need to be satisfied in order to allow that Action to be dispatched.
Currently, this pre-requisite checking logic is inside my View code, something like this (pseudocode):
class FooView {
void OnButtonClick() {
if (FooStore.IsButtonClickAllowed) {
Dispatch(ButtonClickAction);
}
}
}
This looks awkward to me, because now my View has business logic code inside it. I tought about putting this checking code into my Store, but I can't. I have more than one Store that handles this Action, and just one of the Stores knows if it's valid or not. So it won't work:
class FooStore {
void Handle(Action) {
if (Action is ButtonClickAction) {
if (IsButtonClickAllowed) {
FooData.Something();
} else {
// Ignore
}
}
}
}
class BarStore {
void Handle(Action) {
if (Action is ButtonClickAction) {
BarData.Something();
}
}
}
I can't tell from BarStore if the ButtonClickAction is allowed, unless I "WaitFor(FooStore)" and then ask it, but this will cause every Store that handles this Action to contain the same check, leading to something really messy.
So far, I'm understanding that an Action in Flux is only dispatched if it's guaranteed to be allowed, i.e. the validity of the Action needs to be checked before it's dispatched. This means this validation needs to be in the View?
The solution to the case of the button example above may be simple: "just hide the button when it's not allowed and it will never happen". But suppose I have an Action that is dispatched when the user hits the spacebar, what should I do? I can't remove the spacebar from the user's keyboard when the Action is not allowed to happen.
P.S. I'm not using React, so the question is purely about Flux archiectural style, I'm not even using JavaScript.

Answer 1

Perhaps it's a matter of degree. I don't consider a simple check to a property managed by the store to be business logic. I consider that to be very simple view logic:
if (FooStore.IsButtonClickAllowed) {
That line seems to have abstracted away all the rules about why the button might not be clickable, and it looks like all that gets managed in the store, which is appropriate.
an Action in Flux is only dispatched if it's guaranteed to be allowed, i.e. the validity of the Action needs to be checked before it's dispatched.
I disagree with this. There are different kinds of validation.
Sometimes very simple validation can be done in a view component. In React, components may employ a small degree of state. Input components are particularly good places to do this. Checking whether the user has typed in something that looks like an email address, for example, can be done in the view component.
Most validation, however, needs to be done against application state or against persistent data. In these cases, you need to send off the action and then let the stores respond to it with business logic.
The action should be like a newspaper, reporting on something that happened in the real world: the user did something, a response came back from the server, etc. Actions don't need to prevented from happening; they report on what actually happened. Stores do the rest.
When the user does something that violates the validation rules, the stores respond to this by providing error data to the views.

Answer 2

I've created a new component (ActionDispatcher) to handle the validations:
class ActionDispatcher {
void ButtonClick() {
if (FooStore.IsButtonClickAllowed) {
Dispatch(ButtonClickAction);
}
}
}
Then, the views (and other action sources) always uses the ActionDispatcher, instead of dispatching the actions directly:
class FooView {
void OnButtonClick() {
ActionDispatcher.ButtonClick();
}
}
I've just organized the validation code into a single location.