Сокеты, длинный опрос и асинхронность в Reactjs

Question

Я создаю приложение, которое будет обращаться к конечной точке API, которое возвращает следующее:

[
  {batchName: "wqrs1", totalJobs: X1, numErrJobs: Y1, numCmpltJobs: Z1, inFlightJobs: K1},
  {batchName: "wqrs2", totalJobs: X2, numErrJobs: Y2, numCmpltJobs: Z2, inFlightJobs: K2},
  {batchName: "wqrsN", totalJobs: XN, numErrJobs: YN, numCmpltJobs: ZN, inFlightJobs: KN},
]

из конечной точки API /get-all-batches, чтобы отобразить его на панели инструментов с помощью Reactjs (что я оченьновый в).я пытаюсь понять, как обновить хранилище / состояние моего реагирования при изменении одного из значений X, Y, Z, K.кто-то может различить сокеты, длинный опрос или асинхронный / ожидание?это то, на что я должен смотреть, чтобы делать подобные вещи?

Answer 1

Вы можете сослаться на это (ответ и сообщение): https://stackoverflow.com/a/53749735/2269464. Ответ содержит полезные советы для начала с React.

Самая важная часть - это вызов setState, один раз .on("value".. triggers.

export default ...... extends Component {
  constructor() {
    this.state = {
      currentToken: 'first value'
    }
  }

  componentDidMount() {
      var that = this;
      var updateDb = firebase.database().ref("currentToken");
      updateDb.on("value", function(snapshot) {
          that.setState({ currentToken: snapshot.val() });
      });
  }

То, что (setState) скажет компоненту выполнить повторную визуализацию, поэтому, если у вас есть код ниже, вы сначала увидите first value, а при запуске firebase у вас будет новое значениеперерисовал для вас по реакции:

render() {
  return <div>{this.state.currentToken}</div>
}