0

Есть ли какой-нибудь способ загружать приложение сразу с некими исходными данными полученными с сервера, а не подгружать их AJAX-ом в самом приложении? Как вообще обычно это делается?

3
  • аяксом , а так в пропсах прописывай дефолтные, или в стор initData Commented 2 сент. 2019 в 12:58
  • Я initData прописать могу на этапе написания приложения. А получить динамически сразу при загрузке приложения с сервера можно или только AJAX-ом уже в загруженном приложении?
    – Artur
    Commented 2 сент. 2019 в 13:01
  • да , только аяксом. можно извратится, написать например на сервере вставку в html скрипта с изначальными данными и глобальной области видимости, но это костыль.. проще аяксом запросить Commented 2 сент. 2019 в 13:03

1 ответ 1

0

Вопрос выглядит неоднозначно. Вы хотите загружать приложение с данными, полученными с сервера, но не хотите подгружать данные в самом приложении. Коротким комментарием не получится дать ответ, поэтому напишу развернутый ответ.

Обычно это делается следующим образом (предположим, что у Вас уже устанолен React и приложение готово к запуску).

  1. Создадим React-элемент, который будет простым компонентом без передаваемых в него props, но с начальным дефолтным состоянием state, описанным в конструкторе (сразу прибайндим наш метод получения данных loadData).

    constructor(props) {
      super(props);
    
      this.state = {
        isLoading: true,
        error: null,
        data: [],
      };
    
      this.loadData = this.loadData.bind(this);
    }
    
  2. Наш компонент будет возвращать HTML в качестве результата. Опишем несколько результатов, предусматривающих наличие и отсутсвие необходимых данных, которые необходимо получить с сервера (в методе render будут простые проверки) - это так называемый условный рендеринг

    render() {
      const { isLoading, data, error } = this.state;
    
      // Данные еще не были получены
      if (isLoading) {
        return <p>Loading data...</p>;
      }
    
      // Данные не получены, что-то пошло не так, ошибка
      if (error) {
        return <p>Error: {error}</p>;
      }
    
      // Данные успешно загружены и есть хотя бы одна запись
      if (data.length) {
        return <p>{data.length} data rows was loaded...</p>;
      }
    
      // Данные успешно загружены, но записей нет
      return <p>Data was loaded. No data to display...</p>;  
    }
    

    Всё достаточно просто. Примитивные проверки. Примитивная логика. Примитивный результат.

  3. Метод componentDidMount() запускается после того, как компонент отрендерился в DOM - здесь мы и будем загружать данные. Никто не мешает сделать это в конструкторе, ведь конструктор компонента React вызывается до того, как компонент будет примонтирован. Однако мы определили состояние, а значит загрузку данных будем делать в методе componentDidMount() - это хорошее место для создания сетевых запросов.

    componentDidMount() {
      // вызов метода загрузки данных `loadData`
      // хотя можно написать код из `loadData` прямо внутри `componentDidMount`
      this.loadData();
    }
    
  4. Раз уж мы разделили метод загрузки данных и метод componentDidMount, то напишем примитивный пример кода метода загрузки данных (URL получения данных выдуманный):

    loadData() {
      fetch('https://api.example.com')
       .then(response => {
         if (response.ok) {
           return response.json();
         } else {
           throw new Error('Something went wrong...');
         }
       })
       .then(data => this.setState({ data, isLoading: false }))
       .catch(error => this.setState({ error, isLoading: false }));
    }
    

    Тут тоже всё просто, можно использовать axios.get для получения данных, можно через fetch - всё на Ваше усмотрение. Нужно обязательно проставить переменной isLoading значение false, чтобы сказать нашему приложению, что загрузка завершена. Это простой пример того, как обычно делается загрузка данных в React-приложении.

С Redux схема такая же, просто дергаете action загрузки данных, на который навешен reducer, затем через mapStateToProps достаете из стейта Redux-store необходимые данные и кладете в стейт Вашего компонента.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.