Могу ли я отправить несколько событий по действию в поток?

Question

Я хочу показать загрузчик, когда происходит аутентификация. У меня есть действие sendAuthCredentials. На этом мероприятии я хочу сделать несколько действий: запрос аутентификации

1. Показать погрузчик
2. Отправить на сервер
3. Ручки ответ и сообщить UserStore проверки подлинности пользователя или не
4. Скрыть Loader.

У меня есть Loader реагировать компонент, LoaderStore и LoaderAction для работы с компонентом.

Так что мой sendAuthCredentials метод выглядит следующим образом:

UserActions = { 
/** 
* @param {string} username 
* @param {string} password 
*/ 
    sendAuthCredentials: function(username, password) { 
    return Q.all(
     [ 
     LoaderActions.showLoader(), 
     authenticateUser(username, password) 
      .then(function(data) { 
      if(data) { 
       AppDispatcher.handleViewAction({ 
       type: ActionTypes.USER_LOGIN_SUCCESS, 
       data: data 
       }); 
       return Q("succcess"); 
      } else { 
       AppDispatcher.handleViewAction({ 
       type: ActionTypes.USER_LOGIN_FAIL 
       }); 
       return Q("failed"); 
      } 
      }) 
     ] 
    ).then(LoaderActions.hideLoader); 
    } 
}; 

Это работает, но я не уверен, правильно ли это способ использовать действия в Flux.

Спасибо за ответ.

Answer 1

Ваше решение в порядке, но, как вы уже упоминаете, вы не используете потенциал в Flux. Если вы используете Flux, вам не нужно использовать обещания для отслеживания ваших асинхронных вызовов. Пронумерованный список действий, о которых вы говорите, является обычным потоком данных потока.

С Flux у вас будет UserStore, где вы можете хранить, если этот пользователь был аутентифицирован или нет (плюс другие данные, которые вы хотите сохранить о пользователе). Затем вы можете просто запросить загрузчика, пока не получите событие, отправленное из UserStore, сообщив вам, что пользователь аутентифицирован или нет.

var authenticateUser = function(username) { 
    <getRequestToAuthentticationResource> 
    .then(function(data){ 
    <storeDataInUserStore> 
    emitAuthenticated(); 
    }) 
} 
var UserStore = _.extend({}, EventEmitter.prototype, { 
    dispatcherIndex: AppDispatcher.register(function(payload) { 
    var action = payload; 
    switch (action.actionType) { 
    case UserConstants.AUTHENTICATE: 
     authenticateUser(action.username); 
     break; 
    } 
} 

Под примером того, как ваше приложение будет слушать и обрабатывать событие. Просто уточнить, это очень простой компонент. Вы можете лучше проверить authCode, чем с if-else.

var YourApp = React.createClass({ 
    getInitialState: function() { 
    return { 
     authCode: "loading" 
    } 
    }, 

    componentDidMount: function() { 
    UserStore.addAuthListener(this._onChange); 
    },  

    _onChange: function() { 
    setState({ 
     authCode: UserStore.getAuthCode() //Sucess or fail 
    }); 
    } 

    render: function() { 
    if(this.state.authCode === "loading"){ 
     return <load information> 
    } else if(this.state.authCode === "success") { 
     return <success information> 
    } else { 
     return <fail> 
    } 
} 

Тогда ваш React-компонент просто хотел, чтобы увидеть, какие данные он хотел бы получить и показать либо информацию о пользователе, ошибку или манипулятором.

Просто помните, что вам нужен addAuthListener в вашем магазине и emitAuthenticated для выполнения этой работы.

Лучшая практика заключается в том, чтобы сделать getRequest, где вы отправляете действия, и когда это возвращается, вы уведомляете магазин. Однако, как видно из примера, вы можете сделать это и в магазине.