按照通量模式以干净的方式将数据从react.js存储传递到组件

Question

following the Flux pattern I'm trying to update my component and pass some values (a string and a boolean in this specific case) via the store.

I could not find any non-hacky way to solve this yet ie using global vars in the Store and use a getter function in the Store which is called from the component on ComponentWillMount(), not a nice solution.

Here's a stripped down code example to show what im trying to achieve:

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;

As mentioned in the Comment above the best solution in my eyes so far would be to call a function in the component from the store ie component.receiveUpdateFromStore(param); and then update the component state within that function but even though they seem to be im/exported correctly to me it is returning receiveUpdateFromStore is undefined.

Any other idea how to solve this is appreciated.

//example component

   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;

Any idea how to pass data from store to a component and update component state in a nice way?

Answer 1

I would hang your store state on the store class instance itself -- something like this.state.displayimportError = true -- and then have the component subscribe to the store:

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>
  }
}

NOTE: Above code untested, and also using class properties/methods for binding updateState .