update responsejs контекст после завершения запроса ajax с архитектурой потока

Question

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

Простой demostration:

У меня есть родительский компонент, который генерирует контекст путем вызова магазина. Магазин получает данные после того, как запрос ajax инициализируется где-то еще. Как это:

RowAPI.ajaxGetAllRows(); 

Тогда у меня есть компонент, который содержит контекст:

let ParentComponent = React.createClass({ 

    childContextTypes: { 
     rows: React.PropTypes.object 
    }, 

    getChildContext: function() { 
     return { 
      rows: RowStore.getAllRows(), 
     }; 
    }, 

    componentDidMount: function() { 
     RowStore.addChangeListener(this._onRowsChanged); 
    }, 

    componentWillUnmount: function() { 
     RowStore.removeChangeListener(this._onRowsChanged); 
    }, 


    render() { 

     return (
      <ChildComponent /> 
     ); 
    }, 

    _onRowsChanged: function() { 
     //Now we need to update context 
    } 

}); 

Теперь, поскольку мы слушаем изменения строк, мы получим обновление, когда наш запрос Ajax закончил и поставить данные в наш магазин. Теперь нам нужно получить эти данные и установить их как контекст. Это проблема.

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

let ChildComponent = React.createClass({ 

    contextTypes: { 
     rows: React.PropTypes.object 
    }, 


    render() { 

     return (
      <div style={styles.wrapper}> 
       {this.context.rows} 
      </div> 
     ); 

    }, 

}); 

Заранее благодарен!

Answer 1

Я бы изменил getChildContext в ParentComponent, чтобы ссылаться на состояние вместо вызова функции в RowStore.

getChildContext: function() { 
     return { 
      rows: this.state.rows, 
     }; 
    } 

Затем, всякий раз, когда строка меняется, и обратный вызов _onRowsChanged он называется, он может установить this.state.rows соответствующим образом.

Я считаю, что проблема с исходным методом вызова RowStore.getAllRows() внутри getChildContext заключается в том, что он вызывается только один раз. Ничто не заставляет его вызывать RowStore.getAllRows() при каждом изменении.

Однако, используя состояние, вы можете использовать концепции Flux для «принудительного» изменения состояния при каждом обновлении, и это будет отражено в контексте.