Где лучше хранить данные?

Question

[Insolation]

Здравствуйте.
У меня есть приложение, которые будет выводить список продуктов и по клику на продукт выводить данные про него. У меня есть 2 предложения как хранить данные продуктов (они приходят через API).

1. Сделать класс (просто, не компонент) сервиса (он будет Singleton'ом) в нем будем слать запрос, хранить данные, ну и методы get set. И уже потом юзать этот класс для всех других компонентов.

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

Подскажите с опыта как лучше сделать?

P.S Знаю что проще юзнуть Redux, но пока хочу без него.

Answer 1

[Антон Спирин]

1. Забудьте о таких подходах в React. Лишняя бесполезная сущность. Лучше вынести в отдельный модуль сами запросы к API.
2. Если используете голый API React, то это самый верный путь, так как при изменении state произойдет обновление компонента и его потомков.

import React, { Component } from 'react';
import { Child } from './Child';
import { getSomeData } from './api';

class Parent extends Component {
  state = {
    data: [],
  };

  componentDidMount() {
    getSomeData.then(data => this.setState({ data });
  }

  render() {
    return <Child data={this.state.data} />;
  }
}

Comments

[Insolation]

Спасибо!)

[Павел Антонов]

Антон подскажите а так можно писать?

state = {
    data: [],
  };

или вы просто на скорую руку накидали и все же правильее будет так? просто интересно вдруг это какой-то короткий вариант записи стейта)

constructor(props) {
    super(props);
    this.state = {data: []};
  }

[Антон Спирин]

Павел Антонов, это короткий вариант записи, который можно использовать только с babel. Конкретно плагин transform-class-properties. Он входит в прессеты stage-2, stage-1, stage-0. Так, что если используете один из них смело используйте.
Запись:

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      data: []
    };

    this.handler = this.handler.bind(this);
  }

  handler(e) {
    // do something
  }
}

Аналогична:

class Parent extends Component {
  state = {
    data: [],
  };

  handler = e => {
    // do something
  };
}

В React разработке это один стандартов.

[Павел Антонов]

Антон Спирин, ох спасибо! классный кейс, сейчас поделюсь с коллегами) мы только встали на путь реакта

[Павел Антонов]

Антон Спирин, Антон а к пропсам обращаться можно в такой короткой записи стейта?

[Павел Антонов]

похоже можно

import React, { Component } from 'react';
import propTypes from 'prop-types';

class ConversionForm extends Component {
    static propTypes = {
        test: propTypes.string
    }
    state = {
        test: this.props.test
    }
    render () {
        return (
            <div>
                {this.state.test}
            </div>
        );
    }
}

export default ConversionForm;

в родителе
<ConversionForm test="test" />

[Антон Спирин]

Павел Антонов, можно. Так как this.props определяется в конструкторе класса React.Component. В транслированном коде this.state = определяется позже.

Пример

[Павел Антонов]

Антон Спирин, спасибо за объяснение

Answer 2

[Максим]

Если будете делать класс, в котором будут храниться данные и там get/set - то при set, вам нужно будет оповещать всех нуждающихся, что данные изменились.

Если в стейте родителя, то при изменении в нем, все дети итак перерисуются (и в props окажутся новые данные).