Javascript Reactjs使用fluxible从存储中获取事件

嗨，我实际上在尝试使用flux、reactjs和fluxible开发一些应用程序，在处理商店时我遇到了一个问题

事实上，我可以通过操作将信息发送到我的存储区，但我不知道如何接收此操作的结果。请更改我的组件内的存储区以刷新屏幕

我应该在组件中放入什么来刷新列表

以下是我的组件：

import React from 'react';

class Client extends React.Component {

    constructor (props) {
      super(props);
      this.myListView = [];
    }

    add(e){
      this.context.executeAction(function (actionContext, payload, done) {
          actionContext.dispatch('ADD_ITEM', {name:'toto'});
      });
    }

    render() {
        return (
            <div>
                <h2>Client</h2>
                <p>List of all the clients</p>
                <button onClick={this.add.bind(this)}>Click Me</button>
                <ul>
                    {this.myListView.map(function(title) {
                      return <li key={name}>{name}</li>;
                    })}
                </ul>
            </div>
        );
    }
}


Client.contextTypes = {
    executeAction: React.PropTypes.func.isRequired
};

export default Client;

更新

这个.setState应用得不好

_onStoreChange() {
      console.log(this.getStoreState()) // gives me the good list
      this.setState(this.getStoreState()); // doesn't update the list, this.myListView gives [] always
    }

---

您可能希望将

myListView

置于组件的状态，并在实例化时从存储区填充它

因此，您的组件将以如下方式结束：

import ListStore from '../stores/ListStore';
class MyComponent extends React.Component {
    static contextTypes = {
        getStore: React.PropTypes.func.isRequired,
        executeAction: React.PropTypes.func.isRequired
    }

    constructor(props) {
        super(props);
        this.state = this.getStoreState();
        this.boundChangeListener = this._onStoreChange.bind(this);
    }
    getStoreState () {
        return {
            myListView: this.context.getStore(ListStore).getItems()
        }
    }
    componentDidMount () {
        this.context.getStore(ListStore).addChangeListener(this.boundChangeListener);
    }
    componentWillUnmount () {
        this.context.getStore(ListStore).removeChangeListener(this.boundChangeListener);
    }
    _onStoreChange () {
        this.setState(this.getStoreState());
    }
    add(e){
      this.context.executeAction(function (actionContext, payload, done) {
          actionContext.dispatch('ADD_ITEM', {name:'toto'});
       });
    }
    render () {
    return (
        <div>
            <h2>Client</h2>
            <p>List of all the clients</p>
            <button onClick={this.add.bind(this)}>Click Me</button>
            <ul>
                {this.state.myListView.map(function(title) {
                  return <li key={name}>{name}</li>;
                })}
            </ul>
        </div>
    );
    }
}

---

这似乎有效，但我对此没有定义。getStoreState…：感谢你的帮助，反应和变化不是那么容易学会。。。我遇到另一个问题_onStoreChange（）{this.setState（this.getStoreState（））；}无法刷新myListView。第一次真的很难理解为什么。感谢您的帮助我认为您的

add

函数有一些问题，我将添加另一个更新我已更新我的问题，因为我的问题不在那里：-）您需要从

this.state

中提取数据，因此

this.state.myListView

import ListStore from '../stores/ListStore';
class MyComponent extends React.Component {
    static contextTypes = {
        getStore: React.PropTypes.func.isRequired,
        executeAction: React.PropTypes.func.isRequired
    }

    constructor(props) {
        super(props);
        this.state = this.getStoreState();
        this.boundChangeListener = this._onStoreChange.bind(this);
    }
    getStoreState () {
        return {
            myListView: this.context.getStore(ListStore).getItems()
        }
    }
    componentDidMount () {
        this.context.getStore(ListStore).addChangeListener(this.boundChangeListener);
    }
    componentWillUnmount () {
        this.context.getStore(ListStore).removeChangeListener(this.boundChangeListener);
    }
    _onStoreChange () {
        this.setState(this.getStoreState());
    }
    add(e){
      this.context.executeAction(function (actionContext, payload, done) {
          actionContext.dispatch('ADD_ITEM', {name:'toto'});
       });
    }
    render () {
    return (
        <div>
            <h2>Client</h2>
            <p>List of all the clients</p>
            <button onClick={this.add.bind(this)}>Click Me</button>
            <ul>
                {this.state.myListView.map(function(title) {
                  return <li key={name}>{name}</li>;
                })}
            </ul>
        </div>
    );
    }
}

add(e) {
    this.context.executeAction(function(actionContext, payload, done) {
        actionContext.dispatch('ADD_ITEM', payload);
        done();
    }, {name: 'toto'});
}