• Главная
  • Контакты
Подписаться:
  • Twitter
  • Facebook
  • RSS
  • VK
  • PushAll
logo

logo

  • Все
    • Положительные
    • Отрицательные
  • За сегодня
    • Положительные
    • Отрицательные
  • За вчера
    • Положительные
    • Отрицательные
  • За 3 дня
    • Положительные
    • Отрицательные
  • За неделю
    • Положительные
    • Отрицательные
  • За месяц
    • Положительные
    • Отрицательные
  • За год
    • Положительные
    • Отрицательные
  • Сортировка
    • По дате (возр)
    • По дате (убыв)
    • По рейтингу (возр)
    • По рейтингу (убыв)
    • По комментам (возр)
    • По комментам (убыв)
    • По просмотрам (возр)
    • По просмотрам (убыв)
Главная
  • Все
    • Положительные
    • Отрицательные
  • За сегодня
    • Положительные
    • Отрицательные
  • За вчера
    • Положительные
    • Отрицательные
  • За 3 дня
    • Положительные
    • Отрицательные
  • За неделю
    • Положительные
    • Отрицательные
  • За месяц
    • Положительные
    • Отрицательные
  • Главная
  • Как сделать жизнь Redux разработчика проще?

Как сделать жизнь Redux разработчика проще? -1

24.04.2017 13:39
master-7 20 2200 Источник
JavaScript*
Наверняка многие из вас, кто постоянно работают с React + Redux (а может не только с React), постоянно совершают множество однотипных действий. В оригинальном исполнении задача эта монотонная и включает в себя постоянное создание экшенов и редюсеров. Тем более, если приходится работать с какими-то экстраординарными кейсами, в игру включаются экшены с префиксами.

Ваш покорный слуга также испытал очень много батхерта страданий, пока работал по старинке, через switch > case, но я взглянул на задачу немного с другой стороны и привёл к единообразию это в более удобную функционально — объектную форму записи.

И так — после некоторого времени я (master-7) и мой коллега (one-more) попробовали справиться с этим страшным сном фронтэндера и создали весьма интересную библиотечку Redux-Utils.

Конечно же, мы попытались написать общепонятное и исчерпывающее ридми, но для затравки — несколько примеров в статье.

Одна из самых интересных фичей — это объектное создание редюсеров.

import {Reducer} from 'redux-util'
import {UserState} from 'types/UserState'

import {
    GET_USER_DATA_REQUEST,
    GET_USER_DATA_SUCCESS,
    GET_USER_DATA_FAIL
} from 'services/actionTypes'

const initialState: UserState = [];

export default Reducer(initialState, {
    [GET_USER_DATA_REQUEST]: () => null,
    [GET_USER_DATA_SUCCESS]: (state, action) => ({
        ...state,
        data: action.users
    }),
    [GET_USER_DATA_FAIL]: (state, action) => ({
        ...state,
        error: action.error
    })
});

Как вы можете видеть, код стал намного более читабельным по сравнению с записью вида:

import {Reducer} from 'redux-util'
import {UserState} from 'types/UserState'

import {
    GET_USER_DATA_REQUEST,
    GET_USER_DATA_SUCCESS,
    GET_USER_DATA_FAIL
} from 'services/actionTypes'

const initialState: UserState = [];

export default function Reducer(state = initialState, action) => {
    switch (action.type) {
      case GET_USER_DATA_REQUEST:
        return null;
      case GET_USER_DATA_REQUEST: 
        return {
        ...state,
        data: action.users
      };
      case GET_USER_DATA_FAIL: 
        return {
        ...state,
        error: action.error
      };
      default:
        return state;
}

Ну и киллер фича номер два — посмотрим на создание экшенов:

import {buildGenericActionCreator} from 'redux-util'

const START_LOADING = 'START_LOADING';
const END_LOADING = 'END_LOADING';

export const startLoadingActionCreator = buildGenericActionCreator(START_LOADING);
export const endLoadingActionCreator = buildGenericActionCreator(END_LOADING);

// ....

import {startLoadingActionCreator, endLoadingActionCreator} from 'loading-reducer'

const PREFIX = 'PREFIX';
const startLoading = startLoadingActionCreator(PREFIX);
const endLoading = endLoadingActionCreator(PREFIX);
export const loadUser = () => (dispatch: Dispatch) => {
    dispatch(startLoading());
    return api.fetchUser().then(
        response => {
            dispatch(
                loadUserDataAction(response)
            );
            dispatch(endLoading());
        }
    );
};

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

Проголосовало 84 человека. Воздержалось 23 человека.

Только зарегистрированные пользователи могут участвовать в опросе. Войдите, пожалуйста.

Поделиться с друзьями
-->

Комментарии (20)


  1. justboris
    24.04.2017 16:54
    #10188888
    +4

    И чем ваше решение лучше старого доброго redux-actions?


    1. pinebit
      24.04.2017 21:21
      #10189244

      Ну или redux sauce: https://github.com/skellock/reduxsauce


    1. comerc
      25.04.2017 02:17
      #10189528
      +1

      Есть "гораздо более лучший" вариант — redux-act


  1. xGromMx
    24.04.2017 20:03
    #10189136
    +4

    Как сделать жизнь Redux разработчика проще? Просто не использовать его


    1. kanstantsin
      25.04.2017 20:57
      #10190982

      Золотые слова. Вспоминаю как страшный сон эти тонны повторяющегося кода. Особенно доставляют константа на константе и спагетти из функций, которые аргументы функций, являющихся аргументами функций и т.д. по схеме. Как будто код какой-нибудь CMS из 2005 года.


      1. xGromMx
        25.04.2017 20:58
        #10190984

        и на что перешли?)


        1. kanstantsin
          25.04.2017 21:03
          #10190994

          Пока mobx, пока ок, если подумать над архитектурой прежде, чем начать писать :) Но кода стало меньше, появилось какое-никакое ООП, typescript опять же сильно помогает, уже почти можно жить :)


          1. xGromMx
            25.04.2017 21:12
            #10191002

            Ну mobx не про ООП =)


            1. kanstantsin
              26.04.2017 14:13
              #10191982
              +1

              mobx нет, но попытки писать в ооп-стиле с redux это пытка.


              1. justboris
                26.04.2017 14:27
                #10192032

                А зачем обязательно ООП?


                Есть и другие способы разбиения проекта на части, о которых написано в документации Redux


              1. raveclassic
                26.04.2017 16:10
                #10192254

                Правильно, потому что redux совсем не про ооп.


      1. raveclassic
        25.04.2017 23:18
        #10191154
        +1

        Вспоминаю как страшный сон эти тонны повторяющегося кода
        А можете пример, что у вас там так повторялось? Быть может, дело в том коде, а не в redux?
        Особенно доставляют константа на константе
        А что не так с константами?
        которые аргументы функций, являющихся аргументами функций и т.д. по схеме
        И что не так с ФВП?


        1. kanstantsin
          26.04.2017 14:19
          #10192004

          Я не хочу вступать в полемику, просто на проекте в ~25k строк кода со значительным кол-вом запросов к api размер, поддерживаемость, читаемость кода начинают иметь особое значение, поэтому отказ от redux оказался верным решением. На простых примерах типа todo все выглядит прилично, но на реальных проектах появляются проблемы. Только личный опыт :)


          1. raveclassic
            26.04.2017 16:09
            #10192252

            Возможно из-за того, что redux не дает каких-либо внятных рекомендаций по архитектуре сервисного и доменного слоев, предоставляя лишь паттерн для организации внутреннего взаимодействия UI. То, что экшены могут быть thunk'ами или promise'ами — не более чем сильное допущение и упрощение. И когда проект начинает разрастаться, становится понятно, что серьезному IO/эффектам не место ни в редьюсерах, ни в экшенах, ни вообще в redux, так как это не его задача (хоть redux и предоставляет возможность вставки middleware).

            Рекомендую посмотреть на redux-saga и redux-observable. Обе решают наболевшую проблему толстых экшенов с кучей копипасты, расширяемости и поддерживаемости. Саги только в качестве бонуса предоставляют тестируемость без каких-либо моков.


      1. comerc
        26.04.2017 11:06
        #10191592

        Вы просто не умеете его готовить. Константы не нужны совсем.


        https://github.com/comerc/yobr/blob/master/src/ducks/postForm.js


  1. raveclassic
    24.04.2017 20:35
    #10189176

    И как только люди не изворачиваются, лишь бы не писать return.


  1. pinebit
    24.04.2017 21:18
    #10189242
    +1

    Это уже наверное пятый улучшитель redux за месяц. Право же, не нужны они.
    Единственный тул который я сделал сам себе — связка redux action, saga и fetch, чтобы один dispatch запустил сагу, та вызвала API и все декларативно. Думал выложить это на гитхаб, но вовремя остановился.


    1. xGromMx
      25.04.2017 21:13
      #10191004

      уж лучше тогда redux-observable куда лучше саг


      1. raveclassic
        25.04.2017 23:11
        #10191150

        А чем лучше?


  1. avdept
    25.04.2017 11:20
    #10189914

    Зачем использовать редюкс если есть alt?

МЕТКИ

  • Хабы
  • Теги

JavaScript

redux

redux-utils

es6

javascript

СЕРВИСЫ
  • logo

    CloudLogs.ru - Облачное логирование

    • Храните логи вашего сервиса или приложения в облаке. Удобно просматривайте и анализируйте их.
Все публикации автора
  • Как сделать жизнь Redux разработчика проще? -1

    • 24.04.2017 13:39

    Как я писал web app angular + material и REST на Yii2 + webserver nginx +9

    • 11.01.2016 11:48

Подписка


ЛУЧШЕЕ

  • Сегодня
  • Вчера
  • Позавчера
08:05

Сотворение мира за 20 минут на JavaScript, или минималистичная модель эволюции +24

08:28

Книга: «Мозг против мозга. Mind vs brain» +16

07:00

Раннее тестирование или как сократить время деливери +12

06:44

Краткая история банкоматов 90-х: как выглядели и работали первые банкоматы в России +12

09:01

Кабель, который менял игры: два экрана до Nintendo DS +9

08:48

Мультитенантность в Kubernetes: возможные подходы и инструменты +9

10:10

От HackerOne к родным берегам: как меняется российский багхантинг +8

07:53

Google I/O 2025: Gemini, Google Beam, умные очки и другие ключевые анонсы +8

07:28

Файл вместо приложения: локальный тренд или глобальная перспектива? +8

06:00

Lokilizer — бесплатный инструмент для перевода приложений с двух языков на любые другие +8

11:00

Как работает DNS в Linux. Часть 2: все уровни DNS-кэширования +7

08:25

Flame-графики Doom для GPU +7

08:15

Гарантирует ли техническая грамотность аудитории верную оценку инноваций или как Хабр USB-С хоронил +7

07:56

Сравнение технологий PKI и FIDO для задач аутентификации +7

07:15

Как я запускал стартап в Германии в 2024 году +7

07:01

ИИ заменит или изменит программистов? Техлиды рассказали правду +7

05:41

Вот так подкрути геймификацию и мотивация болеть не будет +7

08:22

Почему вы (не) сможете продать свой Saas +6

07:50

Скучная правда про LLM: эффект дают не громкие слова, а простые сценарии с очевидной ценностью +5

06:56

Clipjacking: Взлом через копирование текста — тот же Clickjacking, но круче +5

09:01

Георгий Герганов, автор llama.cpp и звукового кейлогера +80

08:26

Измеритель силы хвата. Когда реально переоценил свою силу +67

11:03

VPS сервер по цене пачки чипсов: обзор самых дешёвых тарифов российских хостеров +56

13:01

Ходим в Интернет с отключённым IPv4 +46

15:01

Получит ли Россия свой Starlink +38

09:15

Программируем квадрокоптер на STM32 +34

12:30

Как настроить синхронизацию в Obsidian с помощью S3 +30

04:57

Илон Маск создал новую партию, а Цукерберг продолжает повышать ставки в битве за AI-таланты +24

10:27

KoboldCpp — нейросеть для развлечений и работы у нас дома +22

17:03

Изучение Python за 2 недели через боль и дедлайн: личная история +20

16:07

Проект выходного дня: экранные линейки +16

08:00

Новое в контроллерах Bitrix Framework: фильтры и валидация +16

06:58

Портативное железо 2025: подборка новых мини-ноутбуков для работы и отдыха +16

06:45

Интеграция Flutter Mobile SDK в ОС Аврора +14

11:10

Почему разработчики не делают «по уму», даже когда знают как +13

14:33

Хроника изменений API фоновой работы в Android +12

11:35

Эмпатия: мощный ресурс руководителя в IT +12

16:03

Что такое «температура» и ряд других занятных фактов около +11

12:15

Введение в WebRTC +11

08:41

Странная физика, которая дала жизнь искусственному интеллекту +11

11:30

Я 10 лет искал причину головной боли, оказалось — чипсы +173

20:06

VHS-Decode — новый метод оцифровки видео +129

09:01

Программирование как разработка теорий: почему senior-разработчики стали ценны как никогда? +120

19:05

Компьютерные сети для начинающих +55

11:15

Мы — не семья: как компании заставляют тебя работать за идею и спасибо +43

08:12

Плотнее, быстрее, дешевле: керамические накопители Cerabyte бросают вызов LTO +37

13:01

Жизнь и смерть Карла Коха: первый хакер на службе КГБ в поисках всемирного заговора и тайны числа 23. Часть 9 — финал +36

08:00

От дефицита к ажиотажу: почему DDR4 снова в центре внимания… по тройной цене +28

13:49

Процессор на коленке ч.4. Конвейер +22

06:48

EngEasy.ru — моё приложение английского. Идея, процесс, технологии +22

06:15

Внедрение зависимостей в PHP: от основ до фреймворков +18

20:07

Оптимизация языковой модели Mamba для выполнения на CPU +16

14:05

Вы могли и не знать. Какие проекты делал Хидэо Кодзима помимо Metal Gear Solid и Death Stranding +15

16:43

В ReactOS заключен контракт для улучшения набора тестов +12

15:00

Почему все ломается, или Зачем менеджеру в ИТ софт-скилы +12

10:40

Как мы подняли современный портал документации из россыпи .md файлов: пошаговое руководство по MkDocs + Material +11

07:56

Системное мышление: когда разработчик становится архитектором +11

13:04

Изобретатель механического светофора: история Гаррета Моргана +10

11:13

Docker + Neovim: поднимаем конфиг на любом сервере и не засоряем систему +10

12:08

Деревья умеют выделять «дождеобразующие» вещества +8

ОБСУЖДАЕМОЕ

  • Тебе не поступить на программиста. Всё кончено -37

    • 584   125000

    Я 10 лет искал причину головной боли, оказалось — чипсы +173

    • 492   33000

    VHS-Decode — новый метод оцифровки видео +129

    • 121   13000

    Программирование как разработка теорий: почему senior-разработчики стали ценны как никогда? +120

    • 94   24000

    Получит ли Россия свой Starlink +40

    • 92   8200

    Нейросети как консультант: как я нашел и заказал ПК без подсветки для локальной работы с ИИ +2

    • 72   3800

    VPS сервер по цене пачки чипсов: обзор самых дешёвых тарифов российских хостеров +56

    • 70   14000

    Компьютерные сети для начинающих +55

    • 54   20000

    Мы — не семья: как компании заставляют тебя работать за идею и спасибо +43

    • 40   9200

    Измеритель силы хвата. Когда реально переоценил свою силу +67

    • 38   5100

    Изучение Python за 2 недели через боль и дедлайн: личная история +20

    • 36   2700

    Ходим в Интернет с отключённым IPv4 +46

    • 34   36000

    Почему ваш ИИ превращается в ваше эхо: Гипотеза архитектурного слияния и как с этим бороться +5

    • 33   924

    Цифровая слежка: ищем человека, зная только его номер +7

    • 32   17000

    EngEasy.ru — моё приложение английского. Идея, процесс, технологии +22

    • 32   5600
  • Главная
  • Контакты
© 2025. Все публикации принадлежат авторам.