Фронтэнд: правила жизни с Редаксом

Evgeny Rodionov
Sputnik Production
Published in
2 min readOct 30, 2017

Если ты кладёшь всё в src/actions и src/reducers, то рано или поздно ты устанешь бегать по директориям, работая с одним модулем. Братан, это вообще самая худшая идея, которая тебе может прийти! Научись всё объединять помодульно: src/complexes/{actions,reducers}.

Блин, однажды я использовал эти контейнеры. Честно говоря, тогда я захлебнулся в водопаде пропов — прикинь, мне приходилось спускать через 10 компонентов одно поле! Как я от этого избавился? Да забыл как страшный сон разделение на компоненты/контейнеры и стал использовать connect() там где мне нужно что-то достать из стейта или прокинуть dispatch. Он же и отвечает за оптимизацию, поэтому всё у меня было хорошо.

Использую ли я connect() даже в самых маленьких компонентах? Ну да! Вот у меня, например, есть список жилых комплексов, выводятся карточками. Ну ты представляешь это? Так вот, я каждую карточку коннекчу, чтобы достать стейт. Прикинь, сначала я делал как дурак — прокидывал весь кусок стейта (complexes), а потом я вспомнил что вторым аргументом mapStateToProps(state, props) идут пропы компонента. Передаешь в карточку айди ЖК, делаешь function mapStateToProps(state, props) { return { complex: state.complexes[props.id] } } и вуаля. Топчик.

Что я могу сказать про редакс-логгер? Блин, ну это удобная тема, только не забывай её настроить — по-умолчанию очень много информации, но если ты воткнёшь collapsed: true и поиграешься с цветами, будет вышак. Я, например, запросы к серверу (они у меня идут с постфиксом started) покрасил в жёлтый, а успешные ответы — зеленым (потому что succeeded).

Кстати, я выкинул bindActionsCreators только этой весной. Почему вообще выкинул? Потому что я устал только в рантайме узнавать о том, что у меня нет props.action. Теперь я в пропы прокидываю только диспатч и вызываю как props.dispatch(action())—так проще, потому что еслинт будет в редакторе орать что action is not defined.

Меня часто упрекают в том, что я многословен. Но это же легко решается! Заведите хелперы, которые будут генерировать экшены. Например, мы делали dispatch(loadListStarted(types.LOAD_LIST, group, options)) и dispatch(loadListSucceeded(types.LOAD_LIST_OK, group, items)). Можно, конечно, и миддлвейры писать, но плохая абстракция хуже отсутствия абстракций.

Ставился ли я когда-нибудь UI-ем в стейт? Это непечатная информация, но да. Офф зе рекорд, как говорится. Когда я был молодой, я пытался, конечно, засунуть всё подряд в Редакс, Даня Абрамов говорил что single source of truth. Потом молодость прошла, я понял что класть статус открытых модалок и нажатых кнопок не нужно.

Даня Абрамов? Ну он меня создал.

Похлопайте в ладоши посту, подписывайтесь на мой Телеграм-канал про разработку, ставьте колокольчики на Ютубе и подписывайтесь на Медиум, чтобы не пропустить новые посты.

И да, я запустил новый курс по фронтэнду.

--

--