ок, так проще? connect( ... dispatch=>({ onClick: dispatch=>dispatch(e=>dispatch=>fetch('google.com').then(()=>dispatch('CLICKED'))) }) )(MyButton)

короче вопрос такой. как минимальными средствами сделать асинхронный экшн?

Ну да, в общем случае примерно так и выглядит )) onClick = () => dispatch => fetch('google.com').then(() => dispatch({ type: 'LODED' })); connect( dispatch => ({ onClick: (...args) => dispatch(onClick.apply(null, args)) }) )

Короче bindActionCreators тебе нужно

function someAsyncAction(dispatch) { doSomeAsync().then(r => dispatch({type: "async", r}); } connect(null, dispatch => ({ asyncAction: () => someAsyncAction(dispatch) }))(Component) не?

ну в компоненте соответственно this.props.asyncAction()

Но так ты не сможешь передать параметры функции

Можно конечно вторым и более аргументом, но каждый раз прокидывать dispatch как-то не айс ) В редаксе же все уже продумали

Вручную никто не биндит экшенкреаторы

это если их надо сложить в диспатч

а здесь не надо

можно карированием сделать const someAsyncAction = dispatch => (all, your, args) => doSomeAsync(all, your, args).then(dispatch) и тогда в mapDispatch будет проще connect(null, dispatch => ({ asyncAction: someAsyncAction(dispatch) })

что бы не париться за аргументы, можно и так делать const someAsyncAction = dispatch => (...args) => doSomeAsync(...args).then(dispatch)

ну это если они совпадают, мало ли надо еще какую фигню делать

типа +1 или склеить

или там в разные асинки их кинуть, но вообще да, конечно можно)

ну я так понял, тут идет проброс и склеивать лучше все таки в самой ф-ции doSomeAsync

вообще я бы так не делал, но вопрос был в том как можно это сделать, вот ответ)

А что такое вообще async action? Не надуманная ли это штука?

childRoutes: [ { path: comp1, getComponent( nextState, cb ) { require.ensure( [], ( require ) => { cb( null, require( comp1 ).default ); }, comp1 ); } }, { path: comp2, getComponent( nextState, cb ) { require.ensure( [], ( require ) => { cb( null, require( comp2 ).default ); }, comp2 ); } }, { path: comp3, getComponent( nextState, cb ) { require.ensure( [], ( require ) => { cb( null, require( comp3 ).default ); }, comp3 ); } } ] Здравствуйте, разбираюсь с Code spliting. Делаю child роуты через require.ensure в react-router'e. Comp1 и Comp3 нормально собираются в отедльные чанки вебпаком, а Comp2 собирается в общую сборку. Следовательно никакой динамической подгрузки нет. Comp1 и Comp3 тупые компоненты без стейта, а Comp2 фактически приложение со своим стором: вот такой код примерно я requir'ю: const Comp2 = () => { return ( <Provider store={ store }> <Root /> </Provider> ); }; Comp2.displayName = Comp2; export default Comp2; Что я пропустил может кто сталкивался?

Хай! а как то можно заставить работать запись const {...rest}=this.props вместе в typescript?

А что такое вообще async action? Не надуманная ли это штука?

что-то, что сделает dispatch потом)

Хай! а как то можно заставить работать запись const {...rest}=this.props вместе в typescript?

спредов для объектов нет в ts

есть только в реакт шаблонах <Blabla {...props} />

это печально

что-то, что сделает dispatch потом)

То есть что-то, что задиспатчит action потом

Тогда что такое action?

Тогда что такое action?

событие

вот блин, философия началась:)

это по сути обьект, который несет в себе название события и полезную нагрузку

короче actionCreator вполне может жрать диспатч, если не использовать bindActionCreators

и тогда танк не нужен

Я просто хочу разобраться. Async actions обсуждаются уже давно и эта тема никак не исчерпает себя.

Ни танк, ни сага мне не нравятся. actionCreator должен создавать action, а reducer должен "редьюсить". Прошу прощения за тавтологию

В сагах же так все и есть

Разве? Если правильно помню, то сайдэффекты описываются в редьюсере, не?

ты путаешь с лупом, кажется

Разве? Если правильно помню, то сайдэффекты описываются в редьюсере, не?

про сагу не знаю, но в танке сайд эффекты описываются в actionCreatore

Нет, там просто подписываешься на запуск экшена и дальше в генераторе запускаешь все остальные нужные экшены

про сагу не знаю, но в танке сайд эффекты описываются в actionCreatore

В танке actionCreator вообще не создаёт action'ы. Такой себе лёгкий грязный хак

Да, может с лупом путаю

Нужно ещё раз сагу посмотреть

В танке actionCreator вообще не создаёт action'ы. Такой себе лёгкий грязный хак

а в чем собственно проблема то? Да ты их там напрямую диспатчишь

return {} vs dispatch( {} ), да грязновато, но все понятно

Разве? Если правильно помню, то сайдэффекты описываются в редьюсере, не?

не

короче actionCreator вполне может жрать диспатч, если не использовать bindActionCreators

конечно может, другое дело, что это не так удобно, как с thunk

да, согласен, у redux-saga хороший подход. Хоть и слишком наворочено выглядит.

возвращаясь к бойлерплейту, в него надо самый наглядный подход, чтобы надо было читать док по минимуму

может кто по requre.ensure проконсультировать?

Denjel, у тебя в вебпак конфиге скорее всего подключён AggresiveMergePlugin который склеивает чанки, чтоб оптимизировать их подгрузку. Хотя, как вариант, можно явно указывать в какой чанк какой компонент должен идти, вот здесь пример: https://github.com/kriasoft/react-static-boilerplate/blob/master/routes.json#L13 (на базе кастомного рутинга)

Denjel, у тебя в вебпак конфиге скорее всего подключён AggresiveMergePlugin который склеивает чанки, чтоб оптимизировать их подгрузку. Хотя, как вариант, можно явно указывать в какой чанк какой компонент должен идти, вот здесь пример: https://github.com/kriasoft/react-static-boilerplate/blob/master/routes.json#L13 (на базе кастомного рутинга)

да не я разобрался уже с той проблемой я там ступил со старых времен импорт не удалил) забыл совсем про него, но не суть, плагин не подключен) мне бы понять как requre.ensure работает? я сейчас на WDS UI делаю. Сейчас все работает шикарно грузится index.html, bundle, по роутам происходит подгрузка чанков ajax'ом

только вот мне бы внутри понять как бандл узнает куда ajax делать? при перезаливке всего это на боевой сервер будет ли это работать? или это магия WDS?

И если да как это настраивается

и еще вопрос по сборке нужно ли выносить vendor'ы типо react react-dom в отдельный чанк? В каких случаях это делается?

когда у тебя vendor библиотеки делятся между абсолютно всеми чанками.

когда у тебя vendor библиотеки делятся между абсолютно всеми чанками.

а в чем выгода от этого? вот допустим на примере реакта? можно вынести его в вендор, а можно оставить в bundle.js

только вот мне бы внутри понять как бандл узнает куда ajax делать? при перезаливке всего это на боевой сервер будет ли это работать? или это магия WDS?

А у тебя на отдельном домене будет лежать .js и/или .css? Ну то есть как ты будешь подключать их в .html

а в чем выгода от этого? вот допустим на примере реакта? можно вынести его в вендор, а можно оставить в bundle.js

Рассчет на то что ты бьешь свое приложение на логические единицы чтобы не грузить сразу все приложение и обеспечить быструю загрузку, например текущей страницы (если ты бьешь приложение по страницам) а вендоры грузятся в любом случае так как юзаются либо везде либо почти везде.

Чтобы вендоры хранились отдельно от чанков, в таком случае разные чанки не будут дублировать вендорные библиотеки.

Поэтому я не выношу вендорные библиотеки по умолчанию в отдельный бандл

С ними возни много имхо.

require.ensure сам сольёт общеиспользованное в главный

Рассчет на то что ты бьешь свое приложение на логические единицы чтобы не грузить сразу все приложение и обеспечить быструю загрузку, например текущей страницы (если ты бьешь приложение по страницам) а вендоры грузятся в любом случае так как юзаются либо везде либо почти везде.

хмм кажется уловил суть когда это использовать а когда нет, спасибо

В этом не всегда есть смысл, но когда это нужно такой функционал есть, тем вебпак и крут

А у тебя на отдельном домене будет лежать .js и/или .css? Ну то есть как ты будешь подключать их в .html

все на одном домене, подрублю бандл и ксс в html, вот пожтому и спрашиваю суть динамической подгрузки, надо ли с этим возиться или вебпак сам все сделает

ERROR: S client not available

Ну там в настройках publicPath влияет на это

в настройках вёбпака

все на одном домене, подрублю бандл и ксс в html, вот пожтому и спрашиваю суть динамической подгрузки, надо ли с этим возиться или вебпак сам все сделает

вендоры выносятся в 1 файл для кеширования, для удобной отладки кода, что бы в файлах чанков не было лишнего

Откуда именно у тебя будут тягаться файлики

Т.е. если у тебя оно будет в domain.my/staic/1.1.js То, publicPath должен быть такой '/static/' вроде как

В доках написано

Ну и собственно когда на сервер будешь класть всё это - ты должен убедиться, что они там есть :)

Задеплоить их туда, где они должны быть

Т.е. если у тебя оно будет в domain.my/staic/1.1.js То, publicPath должен быть такой '/static/' вроде как

спс)

чето меня прорвало на вопросы сегодня) извиняйте) А если тебе надо 2 перезагружаемых dev сервера: один для серверной части приложения, другой для UI. Я вчера ковырялся с этим, в итоге пришел к выводу сделать express сервер через nodemon для первого и webpack-dev-server для второго, и в index.html который отдаешь с экспресса подключать bundle с webpack-dev-server'a. Впринципе схема рабочая, но не очень адекватная, в react-starter-kit это делается в рамках одного процесса ( с дочерними наверное ), я вчера пытался смотреть, но понял что без бутылки водки там не разобраться. Так вот есть адекватные примеры у кого по настройке такого окружения? Если тебе надо и серверную и UI часть в одно время дебажить, чтобы они перезагружались при изменениях сами

сделай файлик который будет два экспресса на разных портах запускать

я делал так вчера, ставил dev-middleware. Там вся соль в сборке UI если back процесс можно спокойно перезапустить при изменении, то UI процесс перезапускать нельзя, а то он занового начинает собирать фронт и это оочень долго, надо чтобы он постоянно включен был, впринципе да не сложно запустить 2 процесса наверно так и сделаю, прост интересно как гуру такие вопросы решают в рамках одного процесса на ноде)

У меня бэкенд вообще не на ноде, просто открываю в соседней вкладке терминала

Можно вот так: http://stackoverflow.com/questions/30950032/how-can-i-run-multiple-npm-scripts-in-parallel

Илья, кстати, как думаешь думаешь зашить ли redux, css modules, postcss в шаблон по умолчанию (react-app), ещё я думаю на счёт MDL (выпиливать из шаблона или оставить)?

Я думаю, стоит. И либо танк, либо сагу.

Есть кто в Epam работает?

Как вам новое название для проекта https://twitter.com/koistya/status/757955779458654208

отличное название, странно, что не заняли уже)

https://facebook.github.io/react/blog/2016/07/22/create-apps-with-no-configuration.html а эту штуку кто-нибудь смотрел? Все хорошо там?)

чето меня прорвало на вопросы сегодня) извиняйте) А если тебе надо 2 перезагружаемых dev сервера: один для серверной части приложения, другой для UI. Я вчера ковырялся с этим, в итоге пришел к выводу сделать express сервер через nodemon для первого и webpack-dev-server для второго, и в index.html который отдаешь с экспресса подключать bundle с webpack-dev-server'a. Впринципе схема рабочая, но не очень адекватная, в react-starter-kit это делается в рамках одного процесса ( с дочерними наверное ), я вчера пытался смотреть, но понял что без бутылки водки там не разобраться. Так вот есть адекватные примеры у кого по настройке такого окружения? Если тебе надо и серверную и UI часть в одно время дебажить, чтобы они перезагружались при изменениях сами

https://github.com/lamo2k123/daemon-command-webpack-plugin

А тут сидят чуваки из kriasoft, авторы react-starter-kit?

Вон Костя выше

Как вам новое название для проекта https://twitter.com/koistya/status/757955779458654208

yoman? не, не слышал

Yeoman пока не умеет билдить и запускать проект с поддержкой code splitting, async chunk loading, HMR и т.п.

умеет, yoman это система для дистрибуции бойлерплейтов, как там внутри напишешь, так и будет работать

Всем привет! Народ, подскажите, пожалуйста, как вообще принято писать поджинацию на реакте?

"паджинация", как и везде

react-virtualized / react-list

а вообще - кладешь в стейт текущую страницу, и в зависимости от нее делаешь запросы

кто-то юзает package.json внутри компонентов, вместо index.js?

https://github.com/benmosher/eslint-plugin-import/issues/458 - поддержите issue, а то ща наворотят(