如何将我的反应组件连接到回流存储？

Question

我对 React 和 Reflux 以及现代 JavaScript 开发有点陌生。努力学习。所以，我正在制作一个基本上是一种聊天的组件 window。带有行和输入框的列表。当您在输入框中键入内容并按回车键时，它会将行添加到列表中。我使用 setState() 使其与纯 React 一起工作，现在我想让它使用 Reflux 存储。我的组件代码是这样的

import React from 'react';
import Reflux from 'reflux';

import ConsoleActions from '../actions';
import ConsoleStore from '../stores';

export default React.createClass({
  mixins: [Reflux.connect(ConsoleStore, "lines")],
  render() {
    var lines = this.state.lines.map(function(line) {
      return(<li>{line}</li>)
    });
    return (
       <ul>{lines}</ul>
       <input onKeyUp={this.enter}/>
    )
  },
  enter(e) {
    if (e.keyCode == 13) {
      ConsoleActions.addConsoleLines([e.target.value]);
      e.target.value = null
    }
  }
});

我的行动是

import Reflux from 'reflux';

export default Reflux.createActions(["addConsoleLines","clearConsoleLog",]);

我的商店是从 'reflux';

导入 Reflux

import Actions from './actions';

export default Reflux.createStore({
  lines: [],
  listenables: Actions,

  getInitialState: function() {
    return [];
  },

  addConsoleLines(lines) {
    lines.forEach(line => {
      this.lines.append(line);
    });
  },

  clearConsoleLog() {
    this.lines = []
  }
});

不确定我遗漏了什么，Reflux.connect() 应该将我的商店连接到州，但我收到 "TypeError: this.state.lines is undefined" 错误。

Answer 1

您应该在添加行时触发更改事件。

export default Reflux.createStore({
  listenables: [Actions],
  lines:[],
  addConsoleLines(lines) {
    let self=this;
    lines.forEach(line => {
      self.lines.append(line);
    });
    self.trigger('change',self.lines);
  },

  clearConsoleLog() {
    this.lines = []
  }
});

然后在您的组件中监听该更改事件

export default React.createClass({
  mixins: [Reflux.connect(ConsoleStore, "onChange")],
  onChange(event,_lines){
         this.setState({lines:_lines});
    }
  render() {
    var lines = this.state.lines.map(function(line) {
      return(<li>{line}</li>)
    });
    return (
       <ul>{lines}</ul>
       <input onKeyUp={this.enter}/>
    )
  },
  enter(e) {
    if (e.keyCode == 13) {
      Actions.addConsoleLines([e.target.value]);
      e.target.value = null
    }
  }
});

Edit1：是的，你是对的。还有另一种简单的方法。 Reflux.connect() mixin 将检查存储中的 getInitialState 方法。如果找到，它将设置组件 getInitialState。我想你忘了 return 初始状态。

export default Reflux.createStore({
  listenables: Actions,

  getInitialState() {
        return [];
    },

  addConsoleLines(lines) {
   ...
  }

如何将我的反应组件连接到回流存储？

How to connect my react component to reflux store?

javascript

reactjs

refluxjs