2014-10-25 3 views
3

Как я
после формы авторизации отправить (React компонент)
используя структуру потока
запрос Ajax, который предоставляет ответ?
Можете ли вы привести пример?Войти ajax request Flux React?

+0

Возможно, тот же вопрос, как этот: http://stackoverflow.com/questions/ 26567401/связь между компонентами – fisherwebdev

+0

На самом деле, у меня другая проблема, но эта, я думаю, я «решил» уже :) –

ответ

7

В основном вам нужно сделать запрос Ajax, а затем создать обработчики успеха/ошибки. Внутри этих обработчиков вы создадите действия, чтобы сообщить свои магазины о результатах. Вероятно, неплохо иметь AppStore или SessionStore или что-то, что будет содержать данные, относящиеся к текущему пользователю и токена auth. Представления вашего контроллера могут прослушивать это хранилище и отображать их дочерние элементы, когда текущий пользователь становится аутентифицированным.

+0

вы можете взглянуть на https://gist.github.com/ButuzGOL/707d1605f63eef55e4af это что ты имеешь в виду ? – ButuzGOL

+5

Я думаю, что вы в основном на правильном пути, но вы рисуете себя в углу с SIGNIN_SUCCESS_EVENT. Если вы просто оставите его абстрактным - просто событие «изменения» - тогда у вас будет более гибкая система. Попытка узнать, какой тип события срабатывает, приводит к более тесной связи. Пример: что происходит, когда у вас есть ошибка? Для этого вам нужно новое событие, и ваше мнение должно знать, что делать с каждым событием. Держите его простым и сохраняйте состояние в магазине, а не в случае, или в представлении. Когда происходит событие изменения, ваше представление просто запрашивает новое состояние магазина (ов). – fisherwebdev

+0

@fisherwebdev, могу я попросить вас взглянуть на вопрос, связанный с reat, здесь - http://stackoverflow.com/questions/27913004/react-js-render-a-component-from-outside-react? –

3

Вот как я сделал:

Когда мой компонент бутстрап, я огонь действие INIT к магазину, который первоначально получает ДАННЫЕ мне нужно. Вот упрощенный поток данных

После Войти мою библиотеку компонента оказывается поэтому необходимо инициализировать данные (книги, пользователь и т.д ..)

Библиотека:

componentDidMount: function() { 
    Store.addChangeListener(this._onChange); 
    Actions.initialize(); 
}, 

Как вы можете видеть, когда мой компонент сделал mount, я выпустил новое действие, и мой магазин обработает это действие.

Магазин:

switch(action.actionType) { 

    case Constants.INIT: 
     _init().done(function() { 
     Store.emitChange(); 
     }); 
     break; 

Я звоню частную функцию _init(), которая будет возвращать объект обещание. Когда обещание завершено, Store готов испустить событие изменения.

В _init я имитируя некоторые нагрузки данных асинхронных, вот почему я дал обещание, вот оно:

function _init() { 

    var loadBooksDeferred = new jQuery.Deferred(), 
     loadUsersDeferred = new jQuery.Deferred(), 
     loadCategoriesDeferred = new jQuery.Deferred(), 
     stateReadyDfd = new jQuery.Deferred(); 

    _loadBooks(loadBooksDeferred); 
    _loadUsers(loadUsersDeferred); 
    _loadCategories(loadCategoriesDeferred); 

    jQuery 
    .when(loadBooksDeferred, loadUsersDeferred, loadCategoriesDeferred) 
    .then(stateReadyDfd.resolve, stateReadyDfd.reject); 

    return stateReadyDfd; 
} 

 Смежные вопросы

  • Нет связанных вопросов^_^