0

I am using flux architecture with React and I have an issue I don't know how to handle.

I need to write a logic that will listen to dispatched action (like a store) and will trigger an action in case the payload contains a specific value.

For example, assume there is an action that dispatch "ITEM_CREATED". My component should catch this "ITEM_CREATED" event and it's payload, and check whether the payload contains correct serial number. In case the serial number is incorrect, my component should execute an action.

Implementing this logic in a store will lead to a-synchronic store, moreover, in flux I can't trigger actions from store.

A possible solution is to create a "virtual" component (with falsy render() method) that will do that logic. Such solution will force me to put this virtual component in my JSX markup, which seams like a hack or a bad workaround.

I really want to know what is the flux solution for such scenario.

Thanks

Naor
  • 23,465
  • 48
  • 152
  • 268
  • #1) Maybe Flux isn't the best choice? #2) Where is the "payload" you mentioned fetched? I don't understand what you mean by "listen to a dispatched action (like a store)"? If you edit the question to include a few more details (some specifics), it may be easier to provide help. – WiredPrairie Apr 16 '15 at 14:58
  • @WiredPrairie I updated the question and added an example. Which alternative do you suggest? – Naor Apr 16 '15 at 15:15
  • 3
    Can you have the action creator do the async work and dispatch the proper messages? – WiredPrairie Apr 16 '15 at 15:23
  • @WiredPrairie The async work needs to be performed only if a condition is true. This condition depends on data that exists on store. As far as I understand flux, action cannot access to store. This is why I can't do your suggestion. – Naor Apr 16 '15 at 19:59
  • Can't whatever code that calls the action creator either do the check or pass the necessary data so that the check could be made? (Or decide that it's OK for the action to query the store). – WiredPrairie Apr 16 '15 at 20:23
  • @WiredPrairie I can do this that way but instead of putting all this complexity in one file, I separate it to store, action and component and I don't like it. – Naor Apr 16 '15 at 21:33
  • @WiredPrairie After rethinking about it, I cannot do it that way because the action is async. Therefore in the time where I check the condition, the value I passed might change on the store. – Naor Apr 17 '15 at 10:43
  • Sorry, I don't follow what you're trying to do well enough to help anymore. My suggestion is to not try to force Flux to work in this scenario. It doesn't sound like it's worth the extra complexity. – WiredPrairie Apr 17 '15 at 12:35

1 Answers1

0

The answer here is to back up and do everything in response to the original action, not to create a cascade of actions.

See also:

Flux Dispatch.dispatch(...): Cannot dispatch in the middle of a dispatch

Dispatching further actions when handling actions

https://github.com/facebook/flux/issues/133#issuecomment-70775063

Community
  • 1
  • 1
fisherwebdev
  • 12,658
  • 4
  • 28
  • 27
  • In order to back up and do everything in response to the original action, I have to fetch a value from a store. This value is required in order to know whether to do this additional action or not, As far as I know, action can't ask data from store. – Naor Apr 17 '15 at 11:21
  • Within StoreB, you would use dispatcher's waitFor() to make sure StoreA has updated first. Then use one of StoreA's getters to retrieve the value. Then you know what to do in StoreB. – fisherwebdev Apr 18 '15 at 01:00