5

I am just working on a simple prototype using flux and react. Previously when i have used React I have sent events from child components up to their parent components (who have registered prop callbacks on the child) and then changed state in the parent.

Following the Flux architecture should ALL events be raised via the Dispatcher? For example even a simple user event such as the selection of a checkbox should be raised via this chain:

  1. create an action in the component event handler
  2. send to the dispatcher
  3. dispatcher sends to a store
  4. store emits a change event to the controller view
  5. the controller view calls back to the store to pick up the change

thanks

jonho
  • 1,680
  • 2
  • 19
  • 29
  • Since you used absolutes like "all events", it's easy to answer "no". Events like keydown may have no direct impact in the Store. Maybe a key for example is filtered or if it's the enter key triggers an event. Maybe you mean to ask something more precise? – WiredPrairie Mar 15 '15 at 12:23
  • thanks. how would you decide if an event should be routed to the store or just handled inside of the child and parent components? – jonho Mar 15 '15 at 13:18
  • 4
    @jonho A good benchmark is, is the data application/domain state, or transient, component state? Transient state often makes the most sense to keep local to the component. Similarly, reusable components should use local state so they're not tied to any specific flux implementation/data. – Michelle Tilley Mar 15 '15 at 21:31
  • @BinaryMuse - that answers my question if you would like to add it as an answer? – jonho Mar 16 '15 at 17:58

2 Answers2

3

A action should be dispatched on two scenarios:

  • User's input
  • When you have to change a parent level data from a child component.

In your case for you dispatch a action for each user's interaction depends on your application and you should ask your self three questions:

  • Do you need make a request to let your backend know about the checkbox state?
  • Do you do any kind of API call?
  • Do other non-child components need to know about it?

If at one least of the answers for the questions above is 'yes' then you should dispatch a action.

lucasfeliciano
  • 86
  • 6
2

I think it's all about dependencies, if your event is or may create dependencies (ie have an impact on your information flux or determine future informations received) then you should use an action and a store.

An example: you have a form with several checkbox I think it's not necessary to use actions and store, the user can change his mind, check/uncheck things, it matters when the form is sent, then you trigger an action.

On the contrary if this checkbox is something like 'notify me if anything new' and trigger the creation of a listener then you should use an action and stores.

François Richard
  • 6,817
  • 10
  • 43
  • 78