回流动作触发两次

Reflux actions triggering twice

本文关键字：两次      更新时间：2023-09-26
出于

某种原因，每次我在 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（）;        },        渲染： 函数（）{            返回 （                按钮触发上述方法单击时            );        }    });

回流储存

    var todoItems = [];    var API = {        addTodoItem： function（item）{            调试器;            if（item ！= "）{            todoItems.push（item）;            }        },        removeTodoItem： function（）{            todoItems.pop（）;        },    }    var TodoStore = Reflux.createStore（{        init： function（）{            this.listenTo（TodoActions.addTodoItem，API.addTodoItem）;            this.listenTo（TodoActions.removeItem，API.removeTodoItem）;        },        getTodos： function（）{            返回待办事项;        },    });

反流作用

    var TodoActions = Reflux.createActions（[        'addTodoItem'，        "删除项"，        "待办事项已更改"    ]);

你可以想象，这一直是我身边的一个真正的刺。我做错了什么？

任何答案将不胜感激！！

你不应该需要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);
  })
},

组件侦听存储上的更改（并调用已有的操作）：

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，组件的状态都会更新。

还有其他方法可以连接到商店，请参阅 Reflux 文档。

相关文章：