Как правильно получить данные из базы данных в ответ?

Question

У меня есть какое-то простое приложение реагирования с авторизацией, которое делается с помощью токенов jwh и магического кода Redux, которые я не могу понять до конца (и надеюсь не трогать эту технологию, если это когда-либо возможно), она тоже действительно не нравитсязапутанный и сложный для написания стиль для начинающих).Но это все тексты.

Так что после входа в систему где-то сохраняется токен, происходит какое-то волшебство, и это имеет два последствия: теперь у меня есть user.id в props.user, и я могу вызывать конечные точки API с помощью axios,(обычно недоступно без аутентификации).

Теперь у меня есть таблица истории входа пользователя, и я хочу отобразить таблицу данных, связанную с пользователем, на странице.Где мне взять базу данных?Самый простой способ, который я нашел на сегодняшний день, это опросить API бэкэнда (опросить mongoDb) методом componentWillMount().Тогда я мог бы иметь доступ к данным в render(), чтобы отобразить таблицу пользователей.Это верно?Или я вынужден каким-то образом "синхронизировать состояние" с Redux?Или что?Я потерялся в парадигмах ..

---

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

Answer 1

Я бы посоветовал вам, если это возможно, сначала создать базовую логику, не используя Redux, потребуется время, чтобы парадигмы освоились - как и зачем их использовать и т. Д. Во-вторых, componentWillMount устарело (будет) устаревшими это никогда не было местом для размещения запросов данных, кроме componentDidMount (как указано в документах ).

Основной способ сделать что-то в React - это вызвать запрос в componentDidMount и , а затем перевести ответ в состояние компонента через setState, что вызовет повторный рендеринг с новыми данными.,С Redux вы делаете то же самое, вы отправляете действие в то же место, действие вызывает запрос, а затем ответ переводится в глобальное состояниечерез редуктор .Однако, чтобы компонент обновлялся при изменении состояния, он должен быть подписан на эту часть состояния.Самый простой способ сделать это - обернуть компонент с помощью функции connect высокого порядка из response-redux и передать эту часть состояния как опору компоненту через объект mapStateToProps.

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

---

Теперь вторая часть вашей проблемы, если я не ошибаюсь, обновляет состояние, когда какой-то другой пользователь обновляет данные где-то еще?Это типичная проблема в Интернете, и вы не сможете обойти ее с помощью React или Redux, потому что это не имеет к ним никакого отношения, а требует постоянной проверки на наличие изменений.Или, другими словами, вам нужен способ, чтобы сервер уведомил ваше приложение React об изменении данных.

Существует несколько способов сделать это:

1. Быстрое и грязное решение, при котором вы запускаете таймер setInterval в своем компоненте для постоянной отправки запросов и обновления состояния каждые X секунд (только не забудьте clearInterval до того, как компонент размонтируется или будет продолжать отправлять запрос неопределенно)

2. Использовать отправленные на сервер события для получения уведомлений при изменении данных

3. Используйте WebSockets или socket.io для той же функциональности, что и события на стороне сервера, или вы также можете переместить весь обмен данными для прохождения одного изэти службы, а не стандартные HTTP-запросы

Answer 2

Простой способ сделать это - как вы сказали - извлечь ваши данные в componentDidMount или componentWillMount хуке вашего компонента.

Обратите внимание, потому что вы вызвали свой API в одном из этихХуки не означают, что ваши данные будут доступны мгновенно при первом вызове вашей функции рендеринга.Ваш API-вызов, вероятно, является асинхронным, и ваш компонент не будет ожидать своего выполнения для визуализации.

Поэтому вам нужно иметь какой-то заполнитель для извлекаемых данных, например, вы можете сделать это так (без избыточности,только хранение ваших данных в состоянии вашего компонента):

class YourComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      isFetchingData: false,
      data: null
    };
  }

  componentDidMount () {
    this.setState({ isFetchingData: true });
    apiCall().then((data) => {
      this.setState({
        isFetchingData: true,
        data
      });
    });
  }

  render () {
    if (!this.state.data) {
      return <p>No data</p>;
    }

    if (!this.state.isLoading) {
      return <p>Loading data</p>;
    }

    // Render your component with data
  }
}