Автор оригинала: FreeCodeCamp Community Member.
Надеша Кабрал
Функциональное программирование отличное. Благодаря введению реагирования, все больше и более и много вспомогательного кода JavaScript написан с учетом принципов FP. Но как мы начинаем использовать мышление FP в повседневном коде, мы пишем? Я попытаюсь использовать повседневную код код и рефакторировать его шагом за шагом.
Наша проблема: Пользователь, который приходит к нашему /Вход Страница будет необязательно иметь Redirect_to Параметр запроса. Как /login? Redirect_to =% 2fmy-page Отказ Обратите внимание, что % 2fmy-page на самом деле /my-page когда он кодируется как часть URL. Нам нужно извлечь эту строку запроса и хранить его в локальном хранилище, чтобы, как только вход будет выполнен, пользователь может быть перенаправлен на моя страница Отказ
Шаг № 0: императивный подход
Если бы нам пришлось выразить решение в простейшей форме выдачи списка команд, как бы мы написали это? Нам нужно будет
- Разобрать строку запроса.
- Получить
Redirect_toзначение. - Декодировать это значение.
- Храните декодированное значение в LocalStorage.
И мы должны поставить попробовать поймать блоки вокруг «небезопасных» функций. Со всем этим наш код будет выглядеть:
Шаг № 1: запись каждого шага как функция
На мгновение, давайте забудем попытку ловких блоков и попробуйте выразить все как функцию здесь.
Когда мы начнем выражать все наши «результаты» в качестве результатов функций, мы видим, что мы можем рефакторировать из нашего основного органа функций. Когда это произойдет, наша функция становится намного легче Grok и намного проще тестировать.
Ранее мы бы проверили основную функцию в целом. Но теперь у нас есть 4 меньших функция, и некоторые из них просто просыпают другие функции, поэтому след, который необходимо проверить, намного меньше.
Давайте определим эти функции прокси и удалите прокси, поэтому у нас есть немного меньше кода.
Шаг № 2: Попытка составления функций
Хорошо. Теперь, похоже, Персистедоректтопарамс Функция представляет собой «композицию» из 4 других функций. Давайте посмотрим, сможем ли мы написать эту функцию в качестве композиции, тем самым устраняя временные результаты, которые мы храним как Const с.
Это хорошо. Но я чувствую, что человек, который читает этот вызов вложенной функции. Если бы был способ распутать этот беспорядок, это было бы потрясающе.
Шаг № 3: более читаемый состав
Если вы сделали несколько redux или пересматриваете, вы бы столкнулись с составить Отказ Состав – это утилита, которая принимает несколько функций и возвращает одну функцию, которая вызывает базовые функции один за другим. Есть и другие Отличные источники Чтобы узнать о составе, поэтому я не буду в подробности об этом здесь.
С сочинением наш код будет выглядеть так:
Одна вещь с сочиной в том, что она снижает функции право налево. Итак, первая функция, которая вызывается в составить Цепочка – последняя функция.
Это не проблема, если вы математика, и знакомы с концепцией, поэтому вы, естественно, читаете это право налево. Но для остальных из нас знакомы с императивным кодом, мы хотели бы прочитать это слева направо.
Шаг № 4: Трубопровод и уплощение
К счастью, есть труба Отказ труба делает то же самое, что составить делает, но в обратном порядке. Итак, первая функция в цепочке – первая функция обработки результата.
Кроме того, кажется, что наш Персистедоректтопарамс Функция стала оберткой для другой функции, которую мы называем ОП Отказ Другими словами, все это делает, выполняется ОП Отказ Мы можем избавиться от обертки и «сглаживать» нашей функции.
Почти готово. Помните, что мы удобно оставили наши попробовать Блокируйте позади, чтобы получить это в текущее состояние? Ну, нам нужен способ представить его обратно. QS.BARSSE небезопасен, а также StoredirectToQuery Отказ Один вариант – сделать их функции обертки и поставить их в попробовать блоки. Другой, функциональный способ – выразить попробовать как функция.
Шаг № 5: Обработка исключений как функция
Есть несколько утилит, которые делают это, но давайте попробуем что-то писать сами.
Наша функция здесь ожидает Opts объект, который будет содержать Третер и ловец Функции. Это вернет функцию, которая, когда вызывается с аргументами, позвоните в Третер С указанными аргументами и после неудачи, позвоните в ловец Отказ Теперь, когда у нас есть небезопасные операции, мы можем поставить их в Третер Раздел, и если они потерпят неудачу, спасайте и дают безопасный результат из раздела Catcher (и даже регистрируйте ошибку).
Шаг № 6: Сделать все вместе
Итак, с этим в виду наш последний код выглядит:
Это более или менее то, что мы хотим. Но чтобы убедиться, что читабельность и реализация нашего кода улучшаются, мы также можем факторировать «безопасные» функции.
Теперь, что у нас есть реализация гораздо большей функции, состоящей из 4 отдельных функций, которые являются очень жесткими, слабо связаны, могут быть проверены независимо, могут быть повторно использованы независимо, учитывать сценарии исключений и очень декларативными Отказ (И ИМО, они приятнее, чтобы прочитать.)
Есть какой-то синтаксический сахар FP, который делает это даже приятнее, но это еще на один день.