В этом посте мы собираемся узнать, как использовать Redux с ванильными JS с нуля. Я разделил эту статью на 3 части.
Часть 1 ответит на эти вопросы:
- Что такое redux?
- Если вы знаете о Redux, то Тебе действительно это нужно?
Часть 2 ответит на этот вопрос:
- Если да, то Как Redux работает?
Часть 3 ответит на этот вопрос:
- Вы знаете, как это работает, то давай посмотреть Как использовать его в JS?
Предпосылка
Вы должны иметь основные теоретические знания js.
Давайте начнем.
Redux is a predictable state container for JavaScript apps.
Хорошо … Позвольте мне закрыть эту статью. ждать . Отказ Отказ Отказ ждать . Отказ Отказ ждать . Отказ Отказ ждать…
Я объясню вам в территории непрофессионала с некоторыми примерами.
Позвольте мне задать вам один вопрос. Как вы управляли данными в ванили JS?
Если ваш ответ хранит локальные данные в переменной, а затем поделитесь ее разными частями приложения. Но это вызвало проблему, потому что, поскольку ваша кодовая база увеличивается, управление 100 переменных в другой части приложения очень сложно. правильно?
Дайте использовать Сделать Пример веб-приложения, чтобы ответить на этот вопрос.
index.html.
В HTML у нас есть один H1 Тег, который показывает счетчик счетчика и кнопка тег, чтобы увеличить H1 ценность.
index.js.
Позвольте написать код JavaScript, чтобы он работал. Не забудьте добавить файл index.js в index.html
Если вы видите H1 Тег в файле index.html у него нет начального значения. Итак, дайте сначала установить его в JS.
В файле index.js я создаю iife (немедленно вызываемое выражение функции). Эта функция выполняется сразу после его создания. В этом случае, как только index.js файловые нагрузки функция iife начинает выполнять выполнение. Затем он настроен 0 Значение в H1 Тег, который является начальным значением. Вы можете хранить начальное значение в какой-то переменной, а затем присвоить так.
Вот улов. Я сохранил данные/состояние в переменной под названием Первоначальный значение
Я буду использовать Государство Чтобы указать данные, которые мы храним в нашем файле index.js.
Теперь вернемся к точке, помните эту вещь, которую я хранил состояние в InitiveValue Переменная. Но что, если я хочу поделиться этим InitiveValue состояние в каком-то другом файле. Либо я должен экспортировать это или я должен сделать его глобальным. Стреляй в меня Но я не буду использовать или рекомендовать для глобального использования. Глобал имеет свои последствия. Например, что, если первоначальное значение счетчика должно быть 0, и поскольку он глобальный, кто-то меняет его на некоторое другое значение, которое неверно.
Так что вы должны экспортировать это Но затем экспортируя его в тысячу файла, а затем управление той же значением во всех файлах является проблематичным (вызывая трудности).
Поэтому мы снова вернулись, чтобы использовать глобальную переменную.
Давайте посмотрим преимущество и недостаток использования глобальной переменной в нашем приложении.
Преимущество:
- Это может быть легко добраться во всех файлах.
- Такое же значение будет там во всем приложении. Поэтому, если мы изменим значение в файл1, то файл2 получит обновленное значение.
Недостаток:
- Поскольку глобальные переменные легко доступны во всех файлах, есть шансы, что если кто-то пытается изменить локальную переменную, которая имеет то же имя, что и в качестве глобальной переменной, то она покажет эффект изменения во всех местах. Эта небольшая ошибка может вызвать много проблем во всем приложении. Например, если InitiveValue Переменная объявлена глобально, и кто-то ошибочно меняется InitiveValue Значение из номера к строке, то он покажет неправильное значение во всем месте, где он используется.
- Нет механизма того, как обновить или ограничить объем глобального значения.
Таким образом, в конце концов, мы пришли к выводу, что управление государством с глобальным объемом в порядке, если мы можем применить некоторые ограничения на его обновление/доступ. Если мы как-то сделаем, мы можем использовать глобальную переменную. Не снимайте меня, я в настроении использовать глобальные переменные.
Теперь вы можете увидеть, что управление состоянием в нашем небольшом приложении является сложной, если его кодовая база увеличивается со временем.
Здесь приходит Redux к спасению.
Простые термины, Redux является государственным управлением 3-го вечеринка JavaScript Library, которая поможет вам управлять данными для вашего большого приложения в более эффективных и элегантных способах.
Концепция Redux состоит в том, чтобы иметь один очень большой глобальный объект JavaScript, который будет управлять данными для всего нашего приложения.
Теперь вы знаете, что такое Redux и почему вы должны его использовать?
У некоторых из вас могут быть сомнения, что если я смогу написать свою собственную логику для обработки глобального объекта JavaScript, то мне не нужен Redux. Я согласен с вами, но вот момент, теперь у вас есть 2 вызовы: – управлять данными о приложении и управлять/изменять логику обработки глобальных объектов JS для времени, а затем тестировать его на тысячи сценариев. Очевидно, никто не хочет взять эту большую головную боль. Лучше позволить Redux рукоятье управление государством для вашего приложения, и мы просто сосредоточены на получении правильных данных в наше приложение.
Как Redux обрабатывает и манипулирует этот большой магазин данных, будет отвечать на следующем посте (часть 2).
Меня зовут Аншул Наутиял. Я являюсь интерфейсом разработчика в ajio.com Ajio, Fashion и Lifestyle Brand, первая претенденция Reorife Retail’s First Pan-Indian E-Commerce Venture Commerce. Вы получите удивительный продукт по отличной скидке. Посетить. Ajio
Я в основном работаю над реализацией новых функций в AJIO. Кроме того, я работаю над оптимизацией производительности, преломления кода и попытайтесь автоматизировать все возможные ручные работы, которые я и моя команда делают каждый день. Я следую за Сухой принцип как в моем коде и жизни.
Ребята дают палец вверх, если вам это нравится, поделитесь этим и оставьте комментарий ниже, если вам это нравится или нет. Поделитесь своими ценными отзывами, чтобы улучшить этот блог.
Оригинал: “https://dev.to/anshulnautiyal/redux-with-vanilla-js-interview-preparation-part-1-4m25”