These are chat archives for dev-ua/reactjs

2nd
Jan 2016
vasivas
@vasivas
Jan 02 2016 11:25
Есть проснувшиеся?
Kirill Yakovenko
@blia
Jan 02 2016 11:32
давно
vasivas
@vasivas
Jan 02 2016 11:51
@blia скажите, код выше, который я вчера в гугле нашел, имеет право на существование или есть лучший способ?
Мне кажется что если он не неправильный, то это лучший вариант чем события которые вынесены в стор и которые заставляют родителя и ребенка представление общаться через "что-то ещё" в обход.
Kirill Yakovenko
@blia
Jan 02 2016 11:57
Код годный. Но я ж не знаю применения.
ну типа конкретный код не нужен так как он равнозначен return <button onClick={this.button_clickHandler}>cklick</button>; :)
но думаю вопрос не в этом
vasivas
@vasivas
Jan 02 2016 12:05
@blia Вы имеете ввиду что в Button не нужно писать onClick={this.props.onClick}?
Kirill Yakovenko
@blia
Jan 02 2016 12:05
нет, что в данном примере Button ничего не делает.
vasivas
@vasivas
Jan 02 2016 12:09
аа... Это минимальный пример демонстрирующий проблему, как например компонента PEOPLE в правой стороне gitter'а. Ведь есть контейнер и есть фоточки и чтобы из контайнера подписать фотки на событие, чтобы потом вывести попап событие over нужно отловить.
И получается что нужно в каждой фотке писать onOver={this.props.onOver}
vasivas
@vasivas
Jan 02 2016 13:02
А умные компоненты сами создают диспетчер или же они получают ссылку на диспетчера?
Просто есть мнение что если компонент будет сам создавать диспетчера, то он будет самостоятельный и не от кого не зависеть.
Kirill Yakovenko
@blia
Jan 02 2016 13:20
Если мы говорим о FLUX - то диспетчер один на приложение.
если компонент независим от окружающей системы - то это скорее не компонент, а приложение или модуль.
vasivas
@vasivas
Jan 02 2016 13:34
@blia тогда вот ещё какой вопрос... все примеры всегда начинаются с двух доминирующих предложениях, что реакт это только модель и что это реактивное программирование. Но приложение это не только представление-реакт, но ещё и модели. И что касается моделей, то они должны придерживаться реактивного стиля и диспатчить события сторам? Типа пришло уведомление с сервера и модель отдиспатчила стору, тот забрал данные и сообщил об этом компоненту. Так должно быть?
Просто меня стор немного в ступор вгоняет. Ведь пока стор хранит данные, его можно назвать интерфейсом модели данных. То есть это модель которая реализует определенный интерфейс. Но с другой стороны, компоненты не хранят данные, то есть если у меня есть главный компонент, который как слайдер меняет страницы-другие компоненты, то он не должен хранить вот эти другие компоненты, а значит их хранит стор, а это в свою очередь означает что он не как не является интерфейсом модели, ведь модели не могут хранить представления и точка. и получается что стор это очень умное хранилище данных и не более.
vasivas
@vasivas
Jan 02 2016 13:41
Ведь компонент типа MainView не должна хранить AllViewsMap ? Она должна хранить только текущее состояние-представление и ждать пока маршрут не сменят и тогда она лезет и берет другое представление?
Kirill Yakovenko
@blia
Jan 02 2016 13:50
По порядку
  1. Реакт это представление, не более
  2. Компоненты вообще ничего в себе не хранят.
  3. С точки зрения приложения компонент это функция, которой надо передать некоторые данные и на основе этих данных возвращает "DOM дерево".
  4. Главный (root) компонент - это композиция из дерева этих функций.
  5. Соответсвенно главному компоненту нужно передать соответственное дерево данных для всех компонентов.
    Это дерево данных есть стор. Просто граф данных не более. Никакой ни умный ни прочее.
  6. У приложения есть диспетчер(доступ к нему есть во "всех" компонентах)
  7. Диспетчер знает некоторое количество экшенов, которые мы определим. По определенным(зачастую всем) экшенам происходит мутация этого самого стора. После мутации стора диспетчер вызывает ререндер нашего приложения с новым стором.
Значит, если тебе нужно с сервера получить какие-то данные - то ты файришь нужный экшен у диспетчера. Диспетчер получает данные, и мутирует стор. Происходит обновление представления с уже полученными данными. Сами данные ты можешь куда-то сохранить, можешь не хранить.
vasivas
@vasivas
Jan 02 2016 13:55
  1. а ко ниже не говорит что я храню данные из стора?
    state = {
     data: this.staore.getData()
    }
И если не трудно, то можно все на примере программирования объяснять без привязки к реализациям.
Мне хочется суть понять.
Kirill Yakovenko
@blia
Jan 02 2016 13:55
нет. Они говорит, что в store.data будут какие-то данные из хранилища
ты эту комманду можешь вызывать перед каждым ререндером.
vasivas
@vasivas
Jan 02 2016 13:56
но ведь это не ссылка на данные, там же может быть строка и тогда она будет сохранена. в компоненте же..
Kirill Yakovenko
@blia
Jan 02 2016 13:57
ну смотри
var result = render({data: db.getSomeData()});
ты же не говоришь, что рендер хранит какие-то данные.
стор это просто имя переменной которое передается в функцию
vasivas
@vasivas
Jan 02 2016 14:00
когда в рендере, то да..
а вот когда Вы говорите что дерево есть стор, то подразумеваете что компонент получает уведомление и берет из стора дерево из комопнетов?
то есть если сделать MainView и стор который будет хранить типа HomePageComponent, AboutPageComponent и будет иметь поле currentPage и при смене роута стор будет диспатчить и MainView лезть в стор и получать currentPage?
vasivas
@vasivas
Jan 02 2016 14:09
export default class LikeInfo extends Component{
    constructor(props){
        super(props);
    }
    static defaultProps = {
        store: null,
    };

    static propTypes = {
        store: React.PropTypes.any.isRequired,
    };


    state = {
        like: this.props.store.like
    };

    store_changeLikeHandler = (event)=>{
        this.setState({
            like: this.props.store.view
        });
    };

    componentWillMount(){
        this.props.store.on('change', this.store_changeLikeHandler);
    }

    render() {
        return <div>{this.state.like}</div>;
    }
}
после того как произойдет рендер свойство like у state обнуляется?
Мне сейчас в голову пришла мысль, что стор это просто value object, который при помощи событий эмитирует односторонний биндинг. Это так?
Ведь если бы стор был просто хранилищем, то он не должен был бы иметь события. А нет, он не просто имитирует биндинг, он же ещё и содержит логику обработки данных полученных от компонента...
vasivas
@vasivas
Jan 02 2016 14:24
у меня вот какое сложилось впечатление... что когда я слышу о реакте, о нем говорять как о шаблонизаторе на котором просто удобно писать приложения, которые не вписываются в рамки установленных ооп правил. Ведь нельзя написать сложное приложение, которые не будет иметь логическую модель. и если я начну писать приложение у пользователей которого от количества лайков будет меняться цвет сообщений, сигнализруя тем самым о важности, то вот это самое количество лайков будет логикой приложения, а значит хранится должно в модели. И получается что когда я прибавлю пользователю один лайк, кликнув по кнопке, компонент который отвечает за лайки должен послать событие диспетчеру и передать ему значение одного лайка. Он передаст этот клик в стор... а что должен сделать стор?
и ещё допустим после увеличения лайка должны лампочки в приложении замигать...
И Вас видимо нет, по этому я продолжу, чтобы Вы поняли о чем я.. И вот по логике которую я слышу, стор запишет эти данные и скажет чтобы компонент запустил лампочки. Но стоп, это же логика приложения! А значит стор должен сначала уведомить модель и если та даст добро, то только тогда он должен (стор) запустить лампочки.
This message was deleted
vasivas
@vasivas
Jan 02 2016 14:30

И вот с этого момента начинается самое интересное... Вы делаете в своих приложениях так -

var data = [];
data.push(user);
data.push(view);
data.push('helloword');

разумеется нет, ведь Вы создали бы три разных массива, один для юзеров, второй для компонентов и так далее. Но почему тогда сторы и данные модели приложения хранят и сами компоненты?

vasivas
@vasivas
Jan 02 2016 14:36
И Ваш последний пример с db.getSomeData() говорит о том, что Вы не к стору обращаетесь, а к модели. Это только она должна с базой работать.
vasivas
@vasivas
Jan 02 2016 16:27
  1. Главный (root) компонент - это композиция из дерева этих функций.
  2. Соответсвенно главному компоненту нужно передать соответственное дерево данных для всех компонентов.
    Это дерево данных есть стор. Просто граф данных не более. Никакой ни умный ни прочее.
  3. После мутации стора диспетчер вызывает ререндер нашего приложения с новым стором.
Скажите, я правильно трактую Ваши слова - я рендерю целую страницу передав в неё один большой стор для все странице? И затем чтобы перерисовать один элемент я не меняю предназначенный конкретно для него стор, а изменяю опять один большой и опять передаю его в компонент всей странице?
Разве не нужно создавать столько сторов, сколько компонентов и перерисовывать конкретный компонент вместо всей странице?
И ещё у меня так и не появилось ответа на вопрос, где хранить компоненты, которые пока не нужны?
ВЕсли отбросить реакт роутер и делать свой, то при изменении маршрута роутер не будет уведомлять представление, это не его обязанность по определению. Но и компонент MainContainer не может хранить массив со всеми остальными компонентами-страницами. А где тогда должны хранится эти компоненты страницы, пока не пришла очередь ставить их и рендерить?
vasivas
@vasivas
Jan 02 2016 17:44
Вы точно меня только запутали, да и сами наверное проспавшись это заметете. Ведь Вы говорите что компонент говорит диспетчеру что нужно что-то сделать, а затем диспетчер говорите компоненту что нужно обновится. Даже если откинуть что-то "от себя" то везде говорится что стор говорит компоненту об обновлении... Разве не так?
Kirill Yakovenko
@blia
Jan 02 2016 18:06

Скажите, я правильно трактую Ваши слова - я рендерю целую страницу передав в неё один большой стор для все странице? И затем чтобы перерисовать один элемент я не меняю предназначенный конкретно для него стор, а изменяю опять один большой и опять передаю его в компонент всей странице?

Именно так. Но реакт имеет VirtualDOM потому в настоящем доме он обновит лишь то, что отличатся.

Даже если откинуть что-то "от себя" то везде говорится что стор говорит компоненту об обновлении... Разве не так?

Стор - это объект, даже не класс, это тупо набор данных, которые передаются в проперти корневого компонента и дальше уже расходятся по всем компонентам по дереву.

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

А на этом я закончу беседу. Удачи.

vasivas
@vasivas
Jan 02 2016 18:11
@blia нет, Вы не подумайте что я грублю, я просто хочу подчеркнуть что Вы говорите то, что даже в контексте flux не говорят.
и мне показалось что Вы немного запутались.
vasivas
@vasivas
Jan 02 2016 18:17

Я вот о чем http://habrahabr.ru/post/249279/ там в пункте 3 говорится что

  1. Ваше хранилище посылает событие „Change“
    а в четвертом говорится вот что -
  2. Ваше представление реагирует на событие „change“

А Вы то и дело употребляете слово flux и говорите что все наоборот и что все статьи на хабре попросту неправильны.

Тоже самое и в офф документации...
По этому мне до сих пор кажется что Вы просто ошиблись..
И если бы не праздничные дни, то я бы и не подумал подумать что Вы пьяны :smile:
Kirill Yakovenko
@blia
Jan 02 2016 18:48
Вот набросал тебе элементраную систему, которая работает с реакт по FLUX. Уж не знаю как проще объяснить.
var store = {
  products: null,
  clicked: false
};

function dispatcher (action) {
  if (action === 'fetch products') {
    store.products = true;
  }
  if (action === 'click') {
    store.clicked = true;
  }
  react(store, dispatcher);
}

function react (data, dispatcher) {
  if (data.clicked) {
    console.log('clicked');
  }
  if (data.products) {
    console.log('products loaded');
  } else {
    console.log('no products');
    // Fire action
    dispatcher('fetch products');
  }
}

// init
dispatcher();

// Emulate user action
setTimeout(function () {
  dispatcher('click');
}, 1000);
Вывод
› node index.js
no products
products loaded
clicked
products loaded
vasivas
@vasivas
Jan 02 2016 19:12

@blia ну вот минималистические примеры-то как раз и не нужны, ими весь гугл забит.
И Ваш наводит меня на две мысли, первая из которых говорит о надуманности типов -

var sorokSem:Batman = 47;

А вторая, что диспетчер делает то что не должен делать. То есть из него сделали супер-божественный-объект.

И если изменить названия, то получится АнимичнаяМодель=>ТолстыйУродливыйКонтроллер=>Представление Или Вы не согласны? А если ещё КомпонентРоутер добавить, то нужно занимать очередь за следующей реализацией Шнюкс, в которой представление переименуют в модель а модель в представление.
Это даже не биндинг, то что Вы показали, за такое казнить нужно.
Это не программирование, а просто убийство того времени, которое я на книги потратил. И те кто их писал должны просто застрелится.
vasivas
@vasivas
Jan 02 2016 19:17
Добрые фейсбукеры дали чудо представление, зачем его губить такой ерундой... Или нужно ждать от них сигнала что бы они разрешили писать правильно?
Это как с ангуляром. В него засунули все что только можно, его специалисты по ходу статей переабулись сотня раз, мол сначала орали что нужно так, потом что нужно так, а потом что они всегда делали только так. А в итоге пишут все так и будут писать так как написано в вики.
Так как было написано в Gof.
И тут тоже самое... Залезли безумые ms принесли долюбанный data-binding и теперь его что все будут во всю фигню сувать лишь бы это было модно, а потом скажут что так и не делали.. я не знаю что это..
вам этот код нужно лет через десять показать, чтобы Вам стыдно стало.
vasivas
@vasivas
Jan 02 2016 19:27
И в ентити систем всегда измененные компоненты говорят что их изменили, а не проверяют все миллионы частиц на изменение.
vasivas
@vasivas
Jan 02 2016 19:48
Я правда не могу остановится и хотя я вернусь к этому разговору потом, но все равно.. А если комопненты ничего не хранят, сторы просто тупые объекты, диспетчер делает больше чем ему положено, роутер это компонент.. а где тогда логика приложения? наверное её нужно писать в тасках и ждать пока они присигналются к диспетчеру?))
vasivas
@vasivas
Jan 02 2016 20:04
@blia я с Вами не первый раз разговариваю и у меня сложилось мнение что Вы вполне разумный человек. Но сегодня Вы забрали у меня вторую половину суток второго новогоднего дня. И я не знаю под чем Вы это сделали и зачем Вы специально говорили то что противоположно истине, но у меня есть доброе намерение сравнить Ваш поступок просто с убийством своего разума. Я искренне надеюсь что завтра при отходнике Вы испытаете все круги ада за такой поступок. Просто не хочется грубить Вам, но удержаться я не могу.
Terry Sahaidak
@terrysahaidak
Jan 02 2016 23:50
@vasivas почитай код редакса, подивись як на ньому пишуть, а не страдай фігньою.