CODEWITHSUNDEEP
reactjsreactjs-fluxflux
Eric
Eric

Reputation: 466

In the Flux architecture, how do you create two actions from a single user event?

I think there are three options:

  1. The UI Component calls two ActionCreator methods. Each ActionCreator dispatches a message.
  2. The UI Component calls one ActionCreator method which dispatches a message and calls another ActionCreator method.
  3. The UI Component calls one ActionCreator method which does not dispatch any message, but calls two other ActionCreator methods which each dispatch their own message.

Is there a reason to prefer one of these options over the others? Is there any other option?

Upvotes: 1

Views: 368

Answers (3)

fisherwebdev
fisherwebdev

Reputation: 12690

This is setter-thinking, and is not the correct way to be thinking about Actions. Actions inform your application, they do not cause side effects.

Stores are in control of your application. They are where all logic resides. Stores cause side effects in response to the information they receive from actions. Actions are like a newspaper. Stores respond to the news.

Actions describe something that happened in the real world. In this case, the user did something. It could instead be that the server responded with some data, or that the browser completed an animation frame. Regardless, it is a singular event that actually happened, not an artificial construct of the code.

What you want here instead is to respond in two different ways to this user event, this single action. Two different stores will respond to the same action, but in different ways.

So you would have this in the event handler:

MyAppActions.userClicked(itemID);

and that would create an action like this:

userClicked: function(itemID) { 
  MyDispatcher.dispatch({
    type: MyAppActions.types.USER_CLICKED,
    id: itemID,
  });
},

and that would play out in your stores like:

switch (action.type) {
  case MyAppActions.types.USER_CLICKED:
    this._handleUserClicked(action.id);
    break;
  // ...
}

In the two stores, the implementation of _handleUserClicked would do things specific to the particular store.

Upvotes: 3

eddyjs
eddyjs

Reputation: 1280

Like Hal stated, it depends on what you're using them for.

  1. The UI Component calls two ActionCreator methods. Each ActionCreator dispatches a message.

I think this is the best solution if you're not specifically sure what you'll use the actions for. If there's any chance the methods could be called individually in other circumstances, it will be easier if you have the UI component call two ActionCreator methods.

  1. The UI Component calls one ActionCreator method which dispatches a message and calls another ActionCreator method.

It's a good point that if you need actions to be done in a certain order, you should have one action that calls another to be sure that the first action completes before the second one begins.

  1. The UI Component calls one ActionCreator method which does not dispatch any message, but calls two other ActionCreator methods which each dispatch their own message.

I think this is probably the least useful because it does the same thing as situation 1 but forceably binds those two actions together. Only use this if you'll always need both actions to be executed.

Upvotes: 1

Hal Helms
Hal Helms

Reputation: 684

There's no reason to prefer one over another, Eric -- unless you need them to be done in a specific order. If that's the case, you probably want to have the First Action do its thing then call the Second Action (which you identified in No. 2 above). But if there's no ordering, there's no particular reason to prefer any of the three methods you outlined.

Upvotes: 1

Related Questions