These are chat archives for dev-ua/reactjs

11th
Aug 2015
Alexey Raspopov
@alexeyraspopov
Aug 11 2015 07:54

https://github.com/captivationsoftware/react-sticky
https://github.com/svenanders/react-stickydiv

кто что из этого использовал и может рекомендовать?

Serhey Shmyg
@sshmyg
Aug 11 2015 08:21
@question Сиджу вникаю в flux і якщо чесно не бачу того за що його всі так люблять :) Хто зможе вказати на принципову різницю від mvc ?
Serhey Shmyg
@sshmyg
Aug 11 2015 08:58
Дякую, почитаю
Uladzimir Havenchyk
@havenchyk
Aug 11 2015 08:58
за качество не ручаюсь, первая ссылка в гугле
Serhey Shmyg
@sshmyg
Aug 11 2015 09:27
Насправді нічого нового :)
Illia Seheda
@ALF-er
Aug 11 2015 09:32
Ты смотрел видео с презентации Флюкса. Где Чанг (и вроде Том Очино) рассказывает о самом Флюкс?
или вот это видео и вообще статью http://facebook.github.io/flux/docs/overview.html#content
Serhey Shmyg
@sshmyg
Aug 11 2015 09:39
Коротше ніякий нахрін це не новий шлях. Це те як правильно потрібно мвц юзати.
Нічого там новго не має
Illia Seheda
@ALF-er
Aug 11 2015 09:40
Кто в МВЦ может менять модель?
Serhey Shmyg
@sshmyg
Aug 11 2015 09:41
Контролер
Illia Seheda
@ALF-er
Aug 11 2015 09:43
Что мешает Вью менять Модель в МВЦ?
Serhey Shmyg
@sshmyg
Aug 11 2015 09:44
блін, а що заважає в флакс змінювати модель?
Nikita Gusakov
@nkt
Aug 11 2015 09:44
нету там модели
Serhey Shmyg
@sshmyg
Aug 11 2015 09:44
ну ясно, стор
ніхто і ніщо не заважає
Nikita Gusakov
@nkt
Aug 11 2015 09:44
и не стор
Illia Seheda
@ALF-er
Aug 11 2015 09:44
То как сделан Стор =) И не агрись
Serhey Shmyg
@sshmyg
Aug 11 2015 09:44
груба теорія і все
Nikita Gusakov
@nkt
Aug 11 2015 09:44
есть просто состояние на конкретный момент
а состояние - оно в сторах, да
Illia Seheda
@ALF-er
Aug 11 2015 09:45
Стор может быть изменён только получением Экшина описывающего событие в системе
Nikita Gusakov
@nkt
Aug 11 2015 09:45
это главная проблема mvc - люди пытаются этот паттерн натянуть вообще на все. Даже на другие паттерны. Я таким же был, пока не дошло))
Illia Seheda
@ALF-er
Aug 11 2015 09:45
не "из Экшина", а именно "получением Экшина"
Стор получая все экшины системы сам решает на какой ему меняться и как именно ему меняться
Serhey Shmyg
@sshmyg
Aug 11 2015 09:46
Стор взагалі то слухає диспатчер, і трігернути діспатчер ніхто не заважає і з вьюхи
Serhey Shmyg
@sshmyg
Aug 11 2015 10:19
Де синхронізація з сервером в флакс відбувається?
Як окрема сутність? http://screencast.com/t/Kq6nbVmNEVWO
Чи в самому сторі?
Yuri Tkachenko
@tyv
Aug 11 2015 11:12
если честно пофигу какой инструмент использовать для организации "данных" приложения и изменения (со словом "мутации" надо что-то делать) его состояния. это вопрос договоренности внутри проекта/команды, чем тетче она описана тем лучше.
Всегда можно изобрести что-то свое. Тот же redux не очень то ложится в описание flux
таким образом как было до ебеней всяких mvc, mvvm и других мычящих названий, столько же будет названий и вариаций созвучных с медицинскими препаратами
Yuri Tkachenko
@tyv
Aug 11 2015 11:17
хочется сказать что-нибудь типа "нужно выбрать проанализировав проект/задачу", но на самом деле это ложь [< тут было другое слово] и самообман и все равно в каждом случае это просто выбор одного человека или группы людей исходя из их знаний, но чаще из интереса в духе "а давайте ту хрень попробуем"
Dmitriy Kulichkin
@dkulichkin
Aug 11 2015 11:48

Ребят, подскажите такой дилетантский вопрос: есть более-менее классический flux и реакт-роут:

<Route path="/" name="home" handler={AppComp} stores={...]}>
    <DefaultRoute handler={...} />
    <Route name="route1" ... />
    <Route name="route2" ...  />
</Route>

Как и где правильно/канонично делать фетч общих данных с сервера в определенные сторы для всех роутов? Если я использую атрибут action в верхнем теге то запросы идут при каждом переходе. Из оставшихся известных мне вариантов остаются только делать это либо в инитах самих сторов, либо в getInitialState/componentDidMount компонента AppComp. Возможно есть и другие подходы. В общем, как правильно?

Dmitriy Kulichkin
@dkulichkin
Aug 11 2015 12:49
anyone?
Illia Seheda
@ALF-er
Aug 11 2015 12:51
Рядом с ReactRouter.run зафечь данные
anoru
@anorudes
Aug 11 2015 12:55
Народ, а как в вебпаке сделать глобальную переменную, чтобы не импортировать реакт в каждом файле?
Dmitriy Kulichkin
@dkulichkin
Aug 11 2015 12:56
@ALF-er У меня нет ReactRouter.run - юзаю grail by Эльдар... Там просто
 app.useRoutes(routes);
 module.exports = app.init();
Illia Seheda
@ALF-er
Aug 11 2015 12:57
О.о
ну ок... ничего не меняется
anoru
@anorudes
Aug 11 2015 12:58
И еще вопрос - никто не сталкивался с ситуацией в redux 1.0rc, где изменения редюсера не обновляются автоматом. С иммутабельностью все хорошо, state не трогается. Сам хотрелоад работает. Допустим делаешь кнопочку, которая добавляет текст, а потом меняешь этот текст, то нажав снова на кнопку, данные вставляются старые. То есть не работает лайврелоад redux'а. Вебпак тем временем замечает изменения, но пишет, что их можно применить только при рефреше страницы.
Вдруг есть какая-то базовая ошибка и я её не понимаю
Хотя бы знать в каком направление двигаться, а то смотрел чужие репы и везде также сделано
будто что-то не замечаю
Dmitriy Kulichkin
@dkulichkin
Aug 11 2015 13:04
@ALF-er в смысле не совсем понял? React.render у меня делается где-то под капотом, но даже в это случае мне кажется что эмитить гет-экшн из getInitialState AppComp компонента (общий враппер) намного лучше. А колбек в run вызывается к тому же разве не каждый раз при переходе? Он же там просто рендерит то что заматчилось:
Router.run(routes, Router.HistoryLocation, function (Handler) {
  React.render(<Handler/>, document.body);
});
Мне просто интересно: в принципе если данные относятся только к без-потомочному роуту, то атрибут action с проброшенным роутовым колбеком решат задачу идеально - данные приходят еще до маунта нужного компонента. Подобным образом в ангуляре например в ui-router`е можно было вытянуть все зависимости по данным в рутовом абстрактном роуте
Illia Seheda
@ALF-er
Aug 11 2015 13:07
рядом, а не внутри
у тебя есть гланвый js файл? Вот в нём и дёрни апи

атрибут action с проброшенным роутовым колбеком решат задачу идеально - данные приходят еще до маунта нужного компонента.

И если ответ идёт долго, то человек будет смотреть в белый экран?

Dmitriy Kulichkin
@dkulichkin
Aug 11 2015 13:10
то как ты предлагаешь - он выполнится после того как уже AppComp запросит свой инишиал стейт
с таким же успехом я могу в самом AppComp.getInitialState апи дернуть (через экшен само собой, но то детали)
This message was deleted

И если ответ идёт долго, то человек будет смотреть в белый экран?

Нет, приложение изоморфное

anoru
@anorudes
Aug 11 2015 13:48
ребят,с проблемой редакса такой не сталкивались значит? :)

let newState = [...state];
case 'ADD':
newState.push(action.text);

есть типа такой редюсер

выполняется при клике на кнопку
если поменять значение в push, то автоматически не обновится. Нужно жать f5
хотя обычные реакт компоненты релоадятся. а вот редакс не хочет
Illia Seheda
@ALF-er
Aug 11 2015 13:56

Нет, приложение изоморфное

и что же будет если человек успеет вбить логин/пароль и жмакнуть Сабмит?

И зачем делать инит запрос на сервер в изоморфном приложении?

хотя обычные реакт компоненты релоадятся. а вот редакс не хочет

Выглядит странно... Лично я бы грешил на то, что редакс ещё не зарелизился. Ну или чтоб наверняка - задай вопрос Дену в тви или слаке

Aleksey Immuzov
@immuzov
Aug 11 2015 14:02
Подскажите адрес в слаке?
Где еще сидят люди по фронтенду?
Illia Seheda
@ALF-er
Aug 11 2015 14:06
я не подскажу... слака ущербная
anoru
@anorudes
Aug 11 2015 14:07
ух, решил
мало ли столкнетесь
Андрей Листочкин (Andrey Listochkin)
@listochkin
Aug 11 2015 14:08
@Immuzov используй http://sameroom.io/и сиди здесь со слаковского клиента
слак неудобен для комьюнити чатов
Aleksey Immuzov
@immuzov
Aug 11 2015 14:10
О, здравствуй. Видел вас в golangrussian. А почему неудобен?
Андрей Листочкин (Andrey Listochkin)
@listochkin
Aug 11 2015 14:14

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

Анлим истоии на бесплатном тарифе, нормальный маркдаун для кода, модерация хорошая и тд

@Immuzov вот список чатов https://gitter.im/dev-ua/
Aleksey Immuzov
@immuzov
Aug 11 2015 14:17
@listochkin Понял, спасибо!
anoru
@anorudes
Aug 11 2015 16:09

redux мне сломал мозг. Помогите поправить )
Вот допустим есть такой редюсер. Я вызываю его 10 раз.

case 'ADD':
newState.push(action.text);

я потом меняю на

case 'ADD':
newState.push(action.text + '123');

То все 10 добавленных элементов добавят к себе 123 в конце. То есть получается, что все вызовы редюсера вызываются заново. А если их было до этого штук 100. Сайт не повиснет? А если там были ассинхронные вызовы. Как сделать, чтобы они снова не перезапускались, но при этом код обновлялся. То есть вызвав этот ADD я получу элемент, к которому добавится 123, но при этом старые не заденет.

Вот видос в тему http://take.ms/iIEoK
на нем видно, что все старые элементы обновились. Это норма?) Если да, то как запретить это и делать новый код лишь на новые вызовы
anoru
@anorudes
Aug 11 2015 16:15
Чтобы при изменение редюсера и нажатие "add" новый код срабатывал, но старые элементы не трогало
Illia Seheda
@ALF-er
Aug 11 2015 16:15
  1. Это норма. Редьюссеры же не будут у тебя меняться в процессе работы программы. (они могут заменяться, но конкретный редьюссер не будет меняться) Тебе показывается как будет выглядеть твоё приложение со всеми произошедшими событиями если бы у тебя был новый редьюссер.
  2. Редьюссеры не могут быть асинхронными. Они могут быть только пьюр функциями от 2х параметров.
anoru
@anorudes
Aug 11 2015 16:19
блин, теперь я еще больше запутался
А если редюсер вызывает сложные вычисления или асинхронное получение данных , как тогда будет?
Aleksey Immuzov
@immuzov
Aug 11 2015 16:21
Редьюсер не вызывает получение данных.
anoru
@anorudes
Aug 11 2015 16:21
Допустим прокликал я апп и произошло 20 таких вызовов. часть из них ассинхронная
Aleksey Immuzov
@immuzov
Aug 11 2015 16:21
Это чистая функция.
anoru
@anorudes
Aug 11 2015 16:21
хм
То есть загрузку и сохранения данных нельзя туда вставлять?
Aleksey Immuzov
@immuzov
Aug 11 2015 16:22
Как я понял не надо вставлять.
anoru
@anorudes
Aug 11 2015 16:22
Как тогда делать сохранения данных в бд, если вызвался ADD редюсера
типа добавил новый элемент, как тот пример сверху. И решил его сохранить в файлик
Aleksey Immuzov
@immuzov
Aug 11 2015 16:23
export function load() {
  return {
    types: [WIDGET_LOAD, WIDGET_LOAD_SUCCESS, WIDGET_LOAD_FAIL],
    promise: (client) => client.get('/loadWidgets')
  };
}
export default function widgets(state = initialState, action = {}) {
  switch (action.type) {
    case WIDGET_LOAD:
      return {
        ...state,
        loading: true
      };
    case WIDGET_LOAD_SUCCESS:
      return {
        ...state,
        loading: false,
        loaded: true,
        data: action.result,
        error: null
      };
    case WIDGET_LOAD_FAIL:
      return {
        ...state,
        loading: false,
        loaded: false,
        data: null,
        error: action.error
      };
    default:
      return state;
  }
}
Первое – экшн, второе – часть редюсера.
anoru
@anorudes
Aug 11 2015 16:25
неплохо
а сохранение?
сохранение тоже промисом как-то делается? :)
Aleksey Immuzov
@immuzov
Aug 11 2015 16:27
export function login(name) {
  return {
    types: [AUTH_LOGIN, AUTH_LOGIN_SUCCESS, AUTH_LOGIN_FAIL],
    promise: (client) => client.post('/login', {
      data: {
        name: name
      }
    })
  };
}
Illia Seheda
@ALF-er
Aug 11 2015 16:27
мидлвары смотри. thunk, promise и тд
anoru
@anorudes
Aug 11 2015 16:30
thanks! постараюсь вникнуть
Alex Afonin
@Tuch
Aug 11 2015 16:32
а в redux как решается проблема waitfor?
zardak
@zardak
Aug 11 2015 16:32
composite stores
Peter Jah
@unel
Aug 11 2015 16:34
wat? oO
а как же «It’s important to note that you’ll only have a single store in a Redux application."
zardak
@zardak
Aug 11 2015 16:35
в 1.0rc это уже composite reducers (:
Peter Jah
@unel
Aug 11 2015 16:35
ohshi
Illia Seheda
@ALF-er
Aug 11 2015 16:36
ты просто задаёшь в какой последовательности вызываются функции.
Alex Afonin
@Tuch
Aug 11 2015 16:36
хмм
zardak
@zardak
Aug 11 2015 16:36
вот кэйс от разработчика
Alex Afonin
@Tuch
Aug 11 2015 16:37
спасибо
и, собственно, доки
Illia Seheda
@ALF-er
Aug 11 2015 19:39
Alexey Volkov
@rosko
Aug 11 2015 19:41
+100500
Peter Jah
@unel
Aug 11 2015 19:53
"Мы забыли, что надо делать ajax-запросы для получения данных, поэтому изобреди ещё один фреймворк" :-D
Потом они вспомнят, что на сервер тоже надо данные отсылать :-)))
Illia Seheda
@ALF-er
Aug 11 2015 19:54
http://facebook.github.io/graphql/ они обо всём помнят. В ФБ этот подход юзается уже давно
Peter Jah
@unel
Aug 11 2015 19:55
Да сам по себе graphql интересный)
Peter Jah
@unel
Aug 11 2015 19:56
Я больше про сам вопрос, откуда дёргать эти ручки)
Vyacheslav Slinko
@vslinko
Aug 11 2015 20:19
@zardak вербозность не есть плохо
Ivan Kurnosov
@zerkms
Aug 11 2015 20:31

Кто в МВЦ может менять модель?

Контролер

@ALF-er @serheyShmyg
это не совсем (совсем не) так
контроллер в MVC выступает исключительно в качестве glue layer
в качестве интерфейса для внешнего мира
Таким образом, ответом на поставленный вопрос будет: слой модели меняет сам себя
В тему: hexagonal architecture
Немного дальше, но всё равно тепло: DDD