Reflux 中的动作创建者（在 Reflux 中处理多个动作）

Question

好的，Reflux 作者说他已经删除了调度程序以将其集成到动作本身以及他讨厌比较字符串和类型比较（假设 - 用于不同的动作区分）

我只是需要添加多个操作并在它们被调用后对其进行单独处理。在这个过程中，我最终在组件而不是创建者中进行了相同的 action.type 比较。

作为一个例子，我将讨论我必须执行上述操作的两种情况，

我有一个规则列表，我通过单击某个按钮组件添加这些规则 - group-buttons

层次结构 -

• 列表
  • 子类别
    • 规则
      • GroupButtons（按钮列表的迭代并使用 onClick 并在按钮单击时生成操作）

同时list下我有rule-cards组件

• 列表

  • RuleCards // 显示一个规则列表，这些规则在单击按钮时会持续推动（实际上是一个规则标签）

在此处附上屏幕截图。

我的代码

动作文件

var Reflux = require('reflux');

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

GroupButtons 组件内部

Actions.addRule(item);

我的商店

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；

在我的列表

中

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;
    }

},

这给我带来了一个问题，即 Redux 和 Reflux 之间的基本区别是什么。最终我必须对 action.type 进行检查。

如果我偏离了我的实施，这是正确的方法吗？

如果不是，作者提到的确切意思是什么

在 Reflux 中，我决定将调度程序自己移到操作中

官方链接-http://spoike.ghost.io/deconstructing-reactjss-flux/

第二种方法——

处理存储中的数据，处理存储本身的添加和删除操作，然后触发状态更改。然后在组件本身中

通过更新任何状态变量来破解

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

第二种方法的问题在于，我根本没有在组件的任何地方使用 this.state.show，而只是更新它以触发组件本身的重新渲染。

请问有什么想法吗？

Answer 1

数据实际上应该存储在存储中。

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);
    }
});

当触发此状态更改时，您的 List 组件将重新渲染。

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

或类似的东西。