Different actions for common components in FluxJS

Question

In my flux application, I have a DropDown React component that renders itself with an array of Key Value Pairs.

I'd like to have two different drop downs, one with Country Data, and another with City Data.

In the Flux pattern, each dropdown would have a Selection Action that contains a payload of the selected value, which a corresponding store would use to update it's state.

How do I specify which dropdown Selection action belongs to which store?

I can create a wrapper component that is specific to each need i.e. CountryDropDown and CityDropDown, and have each create their own specific action CountrySelected and CitySelected but is that the idiomatic approach? If it is, how do I wire up the underlying DropDown component so that it's onChange handler fires the parent's action?

Answer 1

Actions should not belong exclusively to one store or another. This is very much like creating a setter method in the store, which is antithetical to Flux.

One of the central ideas behind Flux is that all stores are informed by all actions. The dispatcher is the mechanism by which actions are distributed to all the stores. This keeps the flow of data open to changing needs.

There are probably a few different solutions to your problem.

I would consider adding a selectedType field to the action that is either 'city' or 'country' (or you could use constants instead of strings). You could pass this value into the React component as a prop, if you are trying to keep it abstracted.

Likewise, if you would rather have completely flexible control over the behavior of the child, and you want to define that in the parent (your final question above), you can pass a callback to the child component as a prop.

You could have separate actions dedicated to each type, as you described, but that seems like duplicating code to me.