Question

嗯，我是flux体系结构的新手，并且现在了解它的工作原理，但是我不明白我应该如何从appAPI.js导出和访问doAuth函数到Login.js中以便显示消息，我理解并能够用本地状态来做，我曾经想过为同一个创建一个新动作，然而，它让我dispatch.dispatch(...) cannot dispatch in the middle of a dispatch可能因为我相信我可以使用相同的工作行动。有人可以帮助我想做什么吗？

提前致谢!!。

appAPI.js

var AppActions = require('../actions/AppActions');
    var Firebase = require('firebase');
    module.exports = {
       signInUser: function(user) {
              const auth = firebase.auth();
              const doAuth = auth.signInWithEmailAndPassword(user.username,user.password)
                   .then(() => console.log('User logged in'))
                   .catch(e => console.log(e.message))
          }
    }

Login.js

var React = require('react');
var AppActions = require('../actions/AppActions');

var Login = React.createClass({

    render: function() {
       return(
       ...
              <form onSubmit={this.onSubmit} >
                  <input type="text" ref={username => {this.username = username}}/>
                    <label className="username">Username</label>
                  <input type="password" ref={password => {this.password = password}}/>
                    <label className="password">Password</label>
                  <input type="submit" value="Sign in"/>
              </form>
       ...
       )
    },


    onSubmit: function(e) {
      e.preventDefault();
      var user = {
        username: this.username.value,
        password: this.password.value
      }
      AppActions.signInUser(user);
    },

});

module.exports = Login;

AppStores.js

....

var _user = [];

var AppStore = assign({}, EventEmitter.prototype, {
    getSignInUser: function() {
      return _user;
    },
    signInUser: function(user) {
        _user.push(user);
    }
   ...
});

AppDispatcher.register(function(payload) {
    var action = payload.action;
    switch(action.actionType) {
        case AppConstants.SIGNIN_USER:
            AppStore.signInUser(action.user);
            AppAPI.signInUser(action.user);
            break;
    }

    return true;
});

module.exports = AppStore;

AppActions.js

var AppDispatcher = require('../dispatcher/AppDispatcher');
var AppConstants = require('../constants/AppConstants');

var AppActions = {
  signInUser: function(user) {
    AppDispatcher.handleViewAction({
        actionType: AppConstants.SIGNIN_USER,
        user: user
    });
  }
}

module.exports = AppActions;

App.js

...

function getAppState() {
    return {
        users: AppStore.getSignInUser(),
    }
}

var App = React.createClass({
    getInitialState: function() {
        return getAppState();
    },
    componentDidMount: function() {
       AppStore.addChangeListener(this._onChange);
    },
    componentWillUnmount: function() {
        AppStore.removeChangeListener(this._onChange);
    },
    render: function() {
        return(
           <div>
              <Login user={this.state.users}/>
           </div>
       )
    },
    _onChange: function() {
      this.setState(getAppState());
   }

});

module.exports = App;

如何从Firebase API文件访问变量

0 个答案: