javascript - 按照 Flux 模式以干净的方式将数据从 React.js Store 传递到组件

Question

按照 Flux 模式，我尝试更新我的组件并通过商店传递一些值(在本例中为字符串和 bool 值)。

我还找不到任何非 hacky 的方法来解决这个问题，即在 Store 中使用全局变量并在 Store 中使用从 ComponentWillMount() 上的组件调用的 getter 函数，这不是一个很好的解决方案。

这是一个精简的代码示例，展示了我想要实现的目标:

ExampleStore.js

import AppDispatcher from '../appDispatcher.jsx';
var displayimportError = false;
var importedID = '';
import axios from 'axios';

class ExampleStore extends EventEmitter {
  constructor() {
    super();
  }



importId(id) {
    let self = this;

    // fetch data from BE
    axios.get('foo.com').then(function(response) {
        if (response.data && response.data.favoriteEntries) {
            displayimportError = false;
        }
        self.emitChange();
    }).catch(function(error) {
        console.log(error);
        displayimportError = true;
        importedID = id;
        self.emitChange();
        // now update component and pass displayimportError and 
        // importedID.
        // best would to component.receiveUpdateFromStore(param); but 
        // it's giving receiveUpdateFromStore is not function back
      });

   }

}

var favObj = new ExampleStore();

AppDispatcher.register(function(payload) {
  var action = payload.action;
  switch (action.actionType) {
    case 'UPDATE_ID':
        favObj.importId(action.data);
        break;
}

return true;
});

export default favObj;

正如上面的评论中提到的，到目前为止，我认为最好的解决方案是从存储中调用组件中的函数，即 component.receiveUpdateFromStore(param);然后更新该函数中的组件状态，但即使它们似乎已正确导入/导出给我，它也会返回 receiveUpdateFromStore 未定义。

任何其他解决此问题的想法都值得赞赏。

//示例组件

   import React from 'react';
   import ReactDom from 'react-dom';
   import ExampleStore from '../stores/ExampleStore.jsx';

   class ExampleComponent extends React.Component {


    constructor(props) {
        super(props);
    }

    receiveUpdateFromStore(param) {
        this.setState({'exampleText': param.text, 'exampleBoolean': param.bool});
    }


     render() {

        return <div className="foo">bar</div;
     }
    }
    export default ExampleComponent;

知道如何将数据从存储传递到组件并以良好的方式更新组件状态吗？

Answer 1

我会将您的商店状态卡在商店类实例本身上 - 类似 this.state.displayimportError = true - 然后让组件订阅商店:

import React from 'react';
import ExampleStore from '../stores/ExampleStore.jsx';

class ExampleComponent extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      importError: ExampleStore.state.displayimportError,
    };
  }

  componentWillMount() {
    ExampleStore.on( 'change', this.updateState );
  }

  componentWillUnmount() {
    ExampleStore.removeListener( 'change', this.updateState ); 
  }

  updateState = () => {
    this.setState( state => ({
      importError: ExampleStore.state.displayimportError,
    })
  }

  render() {
    return <div>{ this.state.importError }</div>
  }
}

注意:以上代码未经测试，并且还使用类属性/方法来绑定(bind) updateState。