Action creators in Reflux ( Handle multiple actions in Reflux )

Question

Alright, Reflux author says he has removed dispatcher to integrate the same in action itself and how much he hates comparing string and type comparision ( assuming - for different action differentiation)

I just was in need to add multiple actions and doing separate processing on same after they are being called. And in the process I ended up doing the same action.type comparision in component instead of creator.

As an example I will discuss two scenarios where I had to do the above,

I have a list of rules which I am adding through click on some button component - group-buttons

Hierarchy -

• List
  • Sub categories
    • Rules
      • GroupButtons ( iteration of list of buttons and uses onClick and generates action on button click)

at the same time under list I have rule-cards component

• List

  • RuleCards // shows a a list of rules which keep pushing on click of button ( a rule tag actually)

Attached a screenshot here.

My code

Action file

var Reflux = require('reflux');

module.exports = Reflux.createActions(['addRule', 'removeRule']);

Inside GroupButtons component

Actions.addRule(item);

My Store

var Reflux = require('reflux');
var Actions = require('../actions/rules');

var CampaignAudienceStore = Reflux.createStore({
    init: function(){
        this.state = {
            type: 'ADD_RULE'
        };
        this.listenTo(Actions.addRule, this.handleAdd);
        this.listenTo(Actions.removeRule, this.handleRemove);
    },
    handleAdd(rule){
        this.state.type = 'ADD_RULE';
        this.state.rule = rule;
        this.trigger(this.state);
    },
    handleRemove(name){
        this.state.type = 'REMOVE_RULE';
        this.state.name = name;
        this.trigger(this.state);
    }
});

module.exports = CampaignAudienceStore;

and in my List

componentDidMount(){
    this.unsubscribe = CampaignAudienceStore.listen(this.ruleClick);
    this.fetchData();
},
componentWillUnmount(){
    this.unsubscribe();
},
ruleClick: function(state) {
    switch (state.type){
        case 'ADD_RULE':
            var rules = this.state.rules;
            rules.push(state.rule);
            this.setState({rules: rules});
            break;
        case 'REMOVE_RULE':
            var rules = this.state.rules;
            for (var i = 0; i < rules.length; i++) {
                if (rules[i].name === state.name ) {
                    rules.splice(i, 1);
                    break;
                }
            }
            this.setState({rules});
        default:
            break;
    }

},

This brings me to the question that what basically stands the difference then between Redux and Reflux. Ultimately I have to do a check on action.type.

if I am deviated from my implementation, Is this the right approach?

If no, what does author mean exactly when he mentions

In Reflux I decided to move the dispatcher into the actions themselves

Official link - http://spoike.ghost.io/deconstructing-reactjss-flux/

Second approach -

Handle data in store, handle add and remove actions in store itself and trigger a state change thereafter.In the component itself then

do a hack by updating any state variable

    componentDidMount() {
       this.unsubscribe = Store.listen(() => FormUtil.setState(this, 'show', !this.state.show));
},

The problem in the second approach is only that I am not using this.state.show at all anywhere in component but just updating it to trigger a re-render of the component itself.

Thoughts please?

Answer 1

The data should actually be stored in the store.

var CampaignAudienceStore = Reflux.createStore({
    init: function(){
        this.state = {
            rules: []
        };
        this.listenTo(Actions.addRule, this.handleAdd);
        this.listenTo(Actions.removeRule, this.handleRemove);
    },
    handleAdd(rule){
        this.state.rule.push(rule);
        this.trigger(this.state);
    },
    handleRemove(name){
        this.state.rules = this.state.rules.filter(function (rule) {
            return rule.name != name;
        });
        this.trigger(this.state);
    }
});

and your List component will just re-render when this state change is triggered.

render: function () {
    var rules = this.state.rules.map((r) => <ListItem props={r}/>);
    return <ul>{rules}</ul>
}

or something along those lines.