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

或类似的东西。

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

1 个答案: