0

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

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

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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