升级后回流连接/触发行为改变答案

【问题标题】：Reflux connect/trigger behavior change after upgrade升级后回流连接/触发行为改变
【发布时间】：2016-08-28 21:20:48
【问题描述】：

我最近将 Reflux 从 v0.3.0 升级到 v0.4.1

当我在更新后第一次测试我的代码时，我必须做的唯一更改是在我的组件的 Reflux.connect 调用中添加一个键。

但是，我遇到了一些奇怪的行为：

var SomeActions = Reflux.createActions([
  'updateName'
]);

var SomeStore = Reflux.createStore({
  listenables: [SomeActions],
  init () {
    this.name = '';
    this.time = new Date();
  },
  getInitialState () {
    return {
      time: this.time
    }
  },
  onUpdateName (newName) {
    this.name = newName;
    this.trigger({
      name: this.name
    });
  }
});

var SomeComponent = React.createClass({
  mixins: [React.connect(SomeStore, 'someState')],
  componentDidMount () {
    SomeActions.updateName(this.props.name);
  },
  render () {
    console.log(this.state.someState);
    ...
  }
});

当组件第一次挂载时，状态是正确的，只包含time。但是，在触发操作后，状态现在不正确，仅包含 name。升级前的行为是 trigger 简单地将新密钥添加/更新到状态中。因此，在动作触发后，我预计状态会同时包含 time 和 name。

我在更新期间错过了什么吗？

【问题讨论】：

你试过this.trigger({ name: this.name, time: this.time }); 吗？很可能您的状态正在被清除时间的触发状态所取代。
是的，这行得通，但是在具有多个复杂商店的复杂应用程序中，我不希望每个操作都强制触发每个可能的状态键。我可以通过围绕一个触发器创建一个包装函数来克服这个问题，该触发器的其余部分可以使用，但这仍然需要该触发器强制每个可能的状态键。我想避免这种情况。
好的，那么 setState 发生在哪里？

标签： reactjs refluxjs

【解决方案1】：

好的，我以前没有使用过回流，所以我不得不阅读他们的文档。您为此使用了不正确的方法。

var SomeComponent = React.createClass({
  mixins: [React.connect(SomeStore, 'someState')],
  ----------------^----------------
  componentDidMount () {
    SomeActions.updateName(this.props.name);
  },
  render () {
    console.log(this.state.someState);
    ...
  }
});

来自文档

如果您只想将组件的状态更新为数据存储传输的任何内容，则可以使用 Reflux.connect(listener,stateKey)

所以来自商店的数据正在改变你的整个组件的状态。

您可以从他们的文档中指定要更新的内容，例如此示例。

var Status = React.createClass({
    mixins: [Reflux.listenTo(statusStore,"onStatusChange")],
    onStatusChange: function(status) {
        this.setState({
            currentStatus: status
        });
    },
    render: function() {
        // render using `this.state.currentStatus`
    }
});

或者您可以将存储的整个状态返回到触发器中的组件

DOCS

【讨论】：