Что я узнал, читая исходный код Redux

Энтони Нг

Я всегда слышал, что код чтения – это хороший способ расширить горизонты в качестве разработчика.

Поэтому я принял сознательное решение по-настоящему глубоко выкопать в хорошо написанную библиотеку JavaScript и узнать столько, сколько смогу.

Я решил посмотреть на Redux Потому что он имеет относительно небольшую кодовую базу.

Эта статья не будет учебником по redux, а скорее Tidbits, которые я узнал, просматривая их исходный код. Если вы заинтересованы в изучении самого Redux, я настоятельно рекомендую смотреть Начало работы с redux Серия от создателя самого Redux, Дэна Абрамова.

Изучение из открытого источника

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

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

Но есть недостаток в работе только самостоятельно. Вы не заметите ни одного из вредных привычек, которые вы забираете по пути. Вы не узнаете никаких лучших практик. Вы не услышите обо всех новых рамках и инструментах, которые прорастают вокруг вас. И вы быстро заметите, что ваши навыки плато во время вашего одинокого приключения.

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

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

Быть в гуще действий – идеальное место.

Возьмите, например, страдивариус скрипка. Инструменты Stradivarius имеют репутацию отличного качества звука, который (возможно,) не имеют равных. Многие теории были представлены, чтобы объяснить превосходство страдивариуса, начиная от древесины, спасенного от старых соборов, к специальным консервантам древесины, которые использовались в день. Люди пытались воспроизвести его с плохими результатами, потому что мы не знаем, как работал Антонио Страдивари.

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

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

Для многих, возможность парить программу – редкая роскошь. Но каждый может учиться у других, глядя на код, который они написали.

Чтение хорошо написанного кода похоже на чтение хорошо написанного романа. Это связано с большей интерпретацией на вашу часть, чем если вы говорили напрямую с автором. Но вы можете собрать множество информации, чтение комментариев и кода.

Для тех, кто скептически относится к тому, сколько можно узнать, чтение чужого кода, обратите внимание на эту историю. Студент средней школы по имени Билл Гейтс ушел дайвинг мусора в мусорное ведро компании, чтобы получить свой исходный код и изучать свои секреты.

Если кто-то вроде Билл Гейтс прошел всю эту неприятности, чтобы прочитать чье-то код, я думаю, что это того стоит открыть репо Github и сделать то же самое.

Чтение через код и обучение от других не новая концепция. Учебники структурированы таким образом, чтобы вы следите за мастером через путешествие по кодированию. Хорошо написанное руководство почувствует, что вы сидите рядом с писателем. Вы получаете возможность прочитать о проблемах, о которых они думают.

Гипертекстовые ссылки предоставляют ресурсы для вас, чтобы прочитать и даже сделать это в середине учебника (вы бы не сделаете это в сеансе программирования сверстников). Раздел «Комментарий» и «Средства социальных сетей» позволяют иметь разговоры с мастерами.

Я также смотрю Code Code на YouTube. Я рекомендую Superdarged Live Coding Session Sears От канала YouTube Developers Google Chrome. Вы можете посмотреть два проекта Live-Code Google инженеров. Вы можете посмотреть, как они приближаются к вопросам производительности, борьба через опечатки, как остальные из нас, и застряли.

Уроки, которые я узнал по пути

Eslint.

Отвлечение – это процесс просматривать ваш код для потенциальных ошибок. Это помогает обеспечить соблюдение стиля кода и сохраняет ваш код согласованным и чистым. Вы можете использовать собственный пользовательский стиль правила или используйте предустановленные правила, которые следуют обычным стилям (например, приведены Airbnb).

Рединг особенно эффективен при работе над командой разработчиков. Это помогает коду похоже на него написано одним человеком. Это также заставляет людей следовать руководству по стилю компании (что разработчики могут не потратить время для чтения).

ЛИНТЕРЫ для более чем эстетики. Они заставляют вас следовать передовым опытам. Например, они могут сказать вам, когда использовать ключевое слово «const» для переменных, которые не переназначены.

Если вы используете React Plugins, они могут предупредить вас о компонентах, которые могут быть повторными в функциональные компоненты без гражданства. Они также являются отличным способом изучения нового синтаксиса ES6 и даже скажите вам, где вы можете обновить свой код с новыми функциями.

Вот инструкции для быстрого начала работы с Eslint в вашем проекте:

1. Установите пакет ESLINT.

$ npm install --save-dev eslint

2. Настройте параметры ESLINT.

./node_modules/.bin/eslint --init

3. Настройте скрипт NPM, чтобы запустить свой Linter в вашем package.json file (необязательно).

"scripts": {  "lint": "./node_modules/.bin/eslint"}

4. Запустить линт

$ npm run lint

Проверьте их документация Для более подробной информации о том, как начать.

Многие редакторы также имеют плагины, которые будут бить ваши файлы, как вы вводите.

Иногда линта могут жаловаться на код, который вам действительно нужен, например, Console.log. Вы можете сказать, что ваш Linter игнорирует определенные строки кода в их анализе.

Для этого с помощью Eslint вы можете включить комментарии ниже:

 // Single line Ignore console.log('Hello World'); // eslint-disable-line no-console

// Multiline Ignore /* eslint-disable no-console */ console.log('Hello World'); console.log('Goodbye World'); /* eslint-enable no-console */

Проверьте наличие замирения

Я нашел случайную «ISCRushed ()» функцию внутри исходного кода, который не имел для него тела. Это было странно.

Но я обнаружил, что его единственная цель состояла в том, чтобы посмотреть, был ли код доминирован. Во время заминирования, имена функций и переменные сокращаются. Был аннулирование, которое проверило, если функция «ISCRushed ()» все еще существует с этим именем. Предупреждение будет показано, если министерненный код использовался в разработке.

Не бойся ошибок

Я редко использовал ошибки в моем кодере вне обучения об этом. JavaScript – это свободно напечатанный язык, поэтому мы должны быть параноиком о том, что передается в наши функции. Мы должны бросать ошибки и кричать как сильно напечатанный язык.

Наконец используйте попробуйте … Catch … Наконец-то заявления с этими ошибками. Это сделает ваш код проще для отладки и причины в будущем.

Взгляните на этот хороший след стека, которые ошибки производят в консоли.

Ошибки делают ваши намерения явными. Например, если ваша функция «Add ()» ожидает только номера, то пусть весь мир знает.

 function add(a, b) {   if(typeof a !== 'number' || typeof b !== 'number') {     throw new Error('Invalid arguments passed. Expected numbers');   }

   return a + b; }

var sum = add('foo', 2); // errors will prevent unintended consequences in your code 

Функциональная композиция

Была функция «Составьте ()», которая создала новые функции из существующих:

 function compose(…funcs) {   if (funcs.length === 0) {     return arg => arg   }

   if (funcs.length === 1) {     return funcs[0]   }

   const last = funcs[funcs.length — 1]   const rest = funcs.slice(0, -1)   return (…args) => rest.reduceRight((composed, f) => f(composed),    last(…args)) } 

Если у меня есть существующая функция, которая квадраты, которые квадраты ряд и другую функцию, которые удваивают номер, я могу объединить их вместе в новую функцию.

 function square(num) {   return num * num; }

function double(num) {   return num * 2;}

function squareThenDouble(num) {   return compose(double, square)(num);}

console.log(squareThenDouble(7)); // 98 

Я не знаю, если когда-нибудь буду использовать это, но приятно иметь это в моих инструментах.

Нативные методы

Когда я смотрел на функцию «Compose ()», я столкнулся с методом массива «Редукторы ()», о которых я никогда не слышал. Это заставило меня интересно, сколько других местных функций я не узнал.

Давайте посмотрим на фрагмент кода, который использует нативный метод массива «Фильтр ()» и тот, который не имеет, и не посмотрим, почему оно того стоит знать, какие существуют собственные функции.

 function custom(array) {   let newArray = [];

   for(var i = 0; i < array.length; i++) {     if(array[i]) {       newArray.push(array[i]);     }   }

   return newArray; }

 function native(array) {   return array.filter((current) => current); }

 const myArray = [false, true, true, false, false]; console.log(custom(myArray)); console.log(native(myArray)); 

Вы можете посмотреть, как лаконичный код, который использует «Filter ()». Что еще более важно, мы не изобретаем колесо. Функция «Фильтр ()» была использована миллионами других пользователей, и, вероятно, меньше багги, чем ваша реализация.

Прежде чем написать свое собственное решение, проверьте, была ли проблема уже решена на языке, которую вы используете. Вы будете удивлены, сколько методов утилиты может иметь язык. (Например, ознакомьтесь с этим Ruby Метод для повторных перестановок в массиве).

Описательные названия функций

Просмотр исходного кода, я видел ряд длинных функций имен.

1. getondefedstateErrormessage.
2. getunexpectedstatehaphaparningmessage.
3. Assertruducersity

Хотя они не откатываются от языка, нет путаницы о том, что они делают.

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

Преимущества использования длинных описательных имен намного превышают раздражение, которое вы получаете от дополнительных нажатий клавиш. Современные текстовые редакторы имеют функции автозаполнения, которые помогут вам ввести Таким образом, у вас нет оправдания использования «X» или «Y» в качестве переменных.

Console.Error vs. Console.log.log

Не используйте Console.log для всего. Если у вас есть ошибка, которую вы хотите распечатать, используйте Console.Error. Вы получаете красивый красный распечаток с трассировкой стека в вашей консоли.

Посмотрите на Документация Для консоли и посмотрите, какие другие методы доступны. Есть встроенный таймер (Console.time ()), вы можете распечатать вашу информацию в столовой макете (Console.table ()) и гораздо больше.

Не бойтесь копать с открытым исходным кодом. Вы обязательно чему-то узнаете и можете даже найти что-то вклад.

Дайте мне знать, что вы узнали, читая коду других людей.

Оригинал: “https://www.freecodecamp.org/news/what-i-learned-from-reading-the-redux-source-code-836793a48768/”