javascript - 回流 Action 触发两次

出于某种原因，每次我在react组件中触发动作时，与该动作相关联的store方法都会触发两次。使用Firefox调试器，我注意到事件发射器似乎两次“发射”了该动作，尽管事实上我只调用了一次该动作（onClick）。

零件


    var TodoHead = React.createClass（{
        addItem：function（e）{

            var todo = this.refs.TodoInput.getDOMNode（）。value;
            TodoActions.addTodoItem（todo）;

            //表示待办事项对象/数组已更改
            TodoActions.todoItemsChanged（）;
        }，
        removeItem：function（）{

            TodoActions.removeItem（）;

            TodoActions.todoItemsChanged（）;
        }，
        渲染：function（）{

            返回（
                //触发上述onClick方法的按钮
            ）;
        }
    }）;



回流商店


    var todoItems = [];
    var API = {
        addTodoItem：函数（项）{
            调试器；
            if（item！=“”）{
            todoItems.push（item）;
            }
        }，
        removeTodoItem：function（）{

            todoItems.pop（）;
        }，
    }

    var TodoStore = Reflux.createStore（{
        初始化：function（）{
            this.listenTo（TodoActions.addTodoItem，API.addTodoItem）;
            this.listenTo（TodoActions.removeItem，API.removeTodoItem）;
        }，
        getTodos：function（）{

            返回todoItems;
        }，
    }）;



反流动作


    var TodoActions = Reflux.createActions（[
        'addTodoItem'，
        '除去项目'，
        'todoItemsChanged'
    ]）;



可以想象，这对我来说真是荆棘。我究竟做错了什么？

任何答案将不胜感激！

最佳答案

您不需要TodoActions.todoItemsChanged()。

只需调用TodoActions.addTodoItem(todo)，它应该如何工作。

因此，没有todoItemsChanged动作。

商店监听动作。
组件侦听商店。
该组件调用动作。

因此，Action-> Store-> Component-> Action等。

商店会监听操作并执行操作，然后触发更改：

var TodoStore = Reflux.createStore({
    init: function(){
        this.listenTo(TodoActions.addTodoItem,this.addTodoItem);
        this.listenTo(TodoActions.removeItem,this.removeTodoItem);
    },
    getInitialState() {
      this.todos = []; // or whatever
      return this.todos;
    },
    addTodoItem(todo) {
      API.addTodoItem(todo);
      // There are no hard and fast rules here,
      // you can do this however you want
      this.update([todo].concat(this.todos));
    },
    removeTodoItem() {
      // Similar to the above
    },
    // The docs do use this method
    // but you can call this.trigger from the liteners
    update(todos) {
      this.todos = todos;
      this.trigger(todos);
    },
});

您可能需要调整API以适应此格式。商店应存储实际的待办事项，并调出API。上面的方法无需检查API是否成功即可更新本地状态。我调出我的api并使用这样的回调（Api在后台使用超级代理）：

// Actual code I pulled for a project I'm working on
onAddNote(id, note) {
  Api.createNote(id, note, (err, res) => {
    let lead = JSON.parse(res.text).lead;
    this.updateLead(lead);
  })
},

组件侦听商店中的更改（并调用您已经拥有的Actions）：

var TodoStore = require('/path/to/TodoStore');
var Reflux = require('reflux');

var TodoHead = React.createClass({
  mixins: [Reflux.connect(TodoStore, 'todos')],
  // **insert the rest of your component**
  // this will add the current value of
  // of the todos onto the state, you
  // access it at this.state.todos

每次商店调用this.trigger(this.todos)时，由于Mixin，组件的状态将被更新。

还有其他连接到商店的方法，请参见The Reflux Docs。

关于javascript - 回流 Action 触发两次，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/29064743/