Реагировать POST на сервер узла и обрабатывать ответ JSON

Question

Я новичок в React, поэтому я пытаюсь понять, как все это работает вместе.

Есть ли способ изменить компонент, который является рендерингом для другого компонента после получения статуса 200 с сервера узлов?

Для примера. Я делаю POST-запрос HTTP из регистрации pageto моего узла с помощью экспресс-сервера. Ответ сервера с объектом json на мой интерфейс. Который теперь я хочу, чтобы профиль/страница профиля отображался, а не оставался на странице регистрации. Это позволяет мне использовать данные Json и отображать их на странице профиля. Это возможно? Если у вас есть другая альтернатива, я тоже открыт для предложений.

Спасибо всем.

Примечание: Я использую маршрутизатор для управления различными маршрутами. Мой узел-сервер настроен с паспортом, чтобы обрабатывать сингл.

Answer 1

Вы в основном нужны управлять состоянием вашего приложения (. пользователь подключается/не подключается). Затем вы можете обернуть свою страницу внутри компонента, управляя тем фактом, что пользователь подключен или нет.

Предположим, вы установили user_is_logged как true, если вход успешно завершен. Вы можете сделать что-то вроде:

var PageWrapper = React.createClass({ 
    render : function() { 
     // user_is_logged is true if user is correctly logged 
     // LoginPage is the authentication form 
     var pageContent = user_is_logged ? this.props.children : <LoginPage />; 
     return (
      <div> 
       <Menu /> 
       <div className="container"> 
        {pageContent} 
       </div> 
      </div> 
     ); 
    }, 
}); 

var MyPage = React.createClass({ 
    render : function() { 
     return (
      <PageWrapper> 
       <div>content of page...</div> 
      </PageWrapper> 
     ); 
    }, 
}); 

И вновь отобразить страницу в Ajax обратного вызова:

ReactDOM.render (<MyPage />, document.getElementById('my-app')); 

Он работает также с React маршрутизатор.

Answer 2

Пожалуйста, обратите внимание на Redux архитектуры доступный на http://redux.js.org/

Понимание этих концепций будет ясно, к вам вопрос.

Затем перейдите к Advanced Темы от Redux, и вы поймете, как асинхронные запросы взаимодействуют с Redux компонентами - (http://redux.js.org/docs/advanced/

Надеется, что это помогает