Question

我最近将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。

我在更新过程中遗漏了什么？

Answer 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

升级后的回流连接/触发器行为更改

1 个答案: