Могу ли я использовать Redux для данных в реальном времени - PullRequest
Новая
       5

Могу ли я использовать Redux для данных в реальном времени

0 голосов
/ 05 января 2019

Я новичок в ReactJS и изучаю его для приложения, требующего данных в реальном времени.

Допустим, у меня есть «n» компонентов, которые должны отображать данные в реальном времени (1 секунда обновления). Приложение должно объединить все «теги», связанные с «n» компонентами, и вызвать веб-сервер, который выдает данные в реальном времени для всех «тегов» (я не могу позвонить с каждого компонента, так как это будет огромной нагрузкой. нужно объединить и сделать один звонок).

Существует компонент "RealTimeDataFetcher", который имеет таймер и вызывает действие "GETLIVEDATA" каждую секунду. Это действие вызывает веб-сервис и возвращает ответ (используя thunk). DataReducer возвращает обновленное состояние, и все «n» компоненты используют MapStateToProps для получения оперативных данных.

Действия 

export const subscribeForData = tag =>{
  return {type : 'SUBSCRIBE' , payload : tag}
}

export const getLiveData = tag[] =>{
  const response = await makeServiceCall(tag[]);
  dispatch({ type: 'LIVE_DATA', payload: response.data });
}

Редуктор 

export const liveData = (livedata, action){
       // update state for live data
}

export const subscribedTags= (tags, action){
       // update state for subscribed tags
}

RealTimeDataFetcher 

class RealTimeDataFetcher extends React.Component{
  componentDidMount(){
    // call subscribeData for fetching livedata for "tags"
  }
}
function mapStateToProps (state){
   return { subscribedTags: state.subscribedTags};
}
connect(mapStateToProps,{...})(RealTimeDataFetcher)

Компонент 

class SomeComponent extends React.Component{
   ComponentDidMount(){
      this.props.subscribeForData("tag");
    }
   ComponentDidUpdate(){
      // I will get the live data here. 

    }
}
function mapStateToProps (state){
   return { liveData: state.liveData};
}
connect(mapStateToProps,{...})(SomeComponent )

Этот подход работает. Но я не уверен, что это правильный способ получения данных в реальном времени.

Есть ли другой подход, который я могу рассмотреть.

...