Ако все още не знаете какво е Redux, в тази статия ще се съсредоточим върху обяснението на всичко, което трябва да знаете за тази библиотека от JavaScript, както и неговите употреби, как може да се използва и т.н. По този начин ще имате всички необходими инструменти, за да можете да го интегрирате в следващите си JS проекти.
Да видим какво представлява Redux!
Какво е JavaScript?
JavaScript (JS), е интерпретиран език за програмиране. Счита се за диалект на стандарта ECMAScript и се характеризира с това, че е обектно-ориентиран, базиран на прототип, императивен, слабо типизиран и динамичен. Въпреки името си, не трябва да се бърка с Java. Създаването му се основава на търговски съображения, след придобиването на Sun Microsystems (създател на Java) от Netscape Navigator (създател на LiveScript) и промяната на името на езика за програмиране.
главно използвани от страна на клиента, представляващи неразделна част от уеб браузърите. Това ви позволява да подобрите потребителския интерфейс и да създадете динамични уеб страници. Освен това JavaScript може да се използва от страна на сървъра, известен като JavaScript от страна на сървъра или SSJS. Неговата приложимост се простира отвъд мрежата, намирайки приложение в PDF документи и настолни приложения, главно уиджети и др.
La Синтаксисът на JavaScript наподобява този на езици като C++ и Java, въпреки че приема имена и конвенции от Java, оттук и името му. Но, както споменах преди, важно е да се отбележи, че въпреки сходното им име, Java и JavaScript имат различна семантика и цели.
От друга страна, трябва да помним, че JavaScript използва реализация на Document Object Model (DOM) и че JS е единственият език за програмиране, който браузърите разбират естествено. Първоначално се използва в HTML уеб страници за операции на клиента без достъп до сървъра. Днес обаче той се използва широко за изпращане и получаване на информация от сървъра, често в комбинация с технологии като AJAX. JavaScript се интерпретира в потребителския агент, докато изразите се изтеглят заедно с HTML кода.
JS приложения
JavaScript е език за програмиране, широко използван в различни приложения и контексти, като например:
- Уеб разработка: Това е от съществено значение при уеб разработката. Използва се за подобряване на интерактивността и потребителското изживяване на уебсайтове и уеб приложения. Използва се при създаването на интерактивни форми, визуални ефекти, валидиране на данни в реално време и динамична навигация, наред с други. Присъства в:
- Уеб интерфейс: Това е крайъгълният камък на front-end разработката. Рамки и библиотеки като React, Angular и Vue.js разчитат на JavaScript за създаване на интерактивни и динамични потребителски интерфейси в уеб приложенията.
- Уеб бекенд: Чрез платформи като Node.js JavaScript се използва от страната на сървъра за изграждане на цялостни уеб приложения. Това позволява на разработчика да използва JavaScript както в предния, така и в задния край на приложението, което улеснява синхронизирането на данни и изграждането на приложения в реално време.
- Сървърни приложения: Въпреки че не е толкова често срещан като другите сървърни езици, JavaScript се използва в разработката на сървърни приложения чрез Node.js. Това е особено полезно за приложения в реално време и приложения, които обработват голям брой едновременни заявки.
- Мобилни приложения: Използва се при разработването на хибридни мобилни приложения, използващи рамки като React Native и Ionic. Тези рамки позволяват на разработчиците да пишат веднъж и да стартират приложението на множество платформи, като iOS и Android.
- Онлайн игри: Използва се при разработването на онлайн игри и браузър игри. Библиотеки като Phaser и Three.js улесняват създаването на интерактивни 2D и 3D игри в браузъра.
- Настолни приложения: Чрез инструменти като Electron е възможно да се създават междуплатформени настолни приложения, използващи уеб технологии като HTML, CSS и JavaScript.
- Разширения на браузъра: За добавяне на допълнителна функционалност към уеб браузърите се използват разширения. Тези разширения обикновено са написани на JavaScript.
- Приложения за интернет на нещата (IoT): Използва се при разработването на приложения и системи за IoT устройства поради способността му да комуникира с хардуер и сензори чрез API и специализирани библиотеки.
Какво е Redux и как работи?
Redux е JavaScript библиотека с отворен код който се използва за управление на състоянието в приложенията и е повлиян от функционалния език Elm. Често се комбинира с други библиотеки като React или Angular за изграждане на потребителски интерфейси. Той е замислен от Дан Абрамов и Андрю Кларк, които са вдъхновени от библиотеката на Facebook, наречена Flux.
Най-общо казано, Redux е малка библиотека с a Опростен и ограничен API, проектиран да действа като предвидим контейнер за състоянието на приложението. Работата му е подобна на концепцията за "намаляване" във функционалното програмиране.
Историята на Redux датира от 2015 г., когато Дан Абрамов започва да разработва първата версия на Redux докато се подготвя да изнесе лекция на конференцията React Europe за Hot Reloading. По време на този процес Абрамов забелязва приликата между модела на потока и функцията на редуктора. Това наблюдение го накара да се чуди дали магазинът на Flux всъщност може да бъде редуцираща функция.
За да осъществи тази идея, Абрамов се свързва с Андрю Кларк, който е автор на имплементацията на Flux, наречена Flummox. Заедно те си сътрудничиха, за да съживят Redux и дефинираха съгласуван API. Освен това те внедриха способността да разширение, използващо междинен софтуер и подобрители на магазина, което допринесе значително за настоящата екосистема Redux, като допълнително разшири нейните възможности.
Връзка Redux и React: какво е React
React е JavaScript библиотека който се фокусира върху създаването на потребителски интерфейси, въпреки че неговата гъвкавост надхвърля това определение. Този инструмент, първоначално разработен от Facebook, е с отворен код и се използва широко поради способността му бързо да създава потребителски интерфейси в различни приложения, включително уеб приложения с една страница (SPA) и приложения за Android и iOS.
За разлика от други рамки, като Angular, които предлагат по-сложни подходи, React е се откроява със способността си да генерира потребителски интерфейси ефективно. Това се постига чрез използването на .jsx файлове, които комбинират логика и потребителски интерфейс в един файл и са организирани в единици, наречени компоненти.
Виртуален DOM: какво е това?
Когато навлизаме в света на ReactJS, вероятно често чуваме за концепцията на Виртуален DOM. Тази идея произлиза от гениална идея: вместо да актуализираме целия действителен DOM, ние променяме само частта, която наистина се нуждае от промени. В старите приложения на JavaScript използвахме да получаваме данни във формат JSON от сървъра и след това да генерираме напълно нов HTML за изобразяване, което води до опресняване на цялата страница при всяка модификация.
Как да инсталирате и конфигурирате Redux във вашия проект
Ако искате да знаете как да инсталирате ReduxИстината е, че не е никак сложно. За да направите това, трябва да отидете на терминала и от там трябва да изпълните следната команда:
npm i -S редуц
Сега имате стабилната версия на Redux, инсталирана на вашата система. Разбира се, вероятно ще трябва да разрешите някои зависимости, като например да имате инсталиран npm, мениджърът на пакети Node.js. След като това бъде направено, сега ще инсталираме React, който също ще трябва да се възползвате от Redux, както и инструментите за разработка, за да можете да започнете да създавате вашите проекти.
За да инсталирате тези други пакети, командите, които трябва да изпълните са:
npm i -S react-redux npm i -D redux-devtools
Сега ще имате всичко готово, за да започнете. Ако отидете в главната папка или директория, където е инсталиран Redux, ще видите, че има няколко поддиректории или подпапки, като например STORE, REDUCERS, ACTIONS, TYPES. Трябва да знаете какво представлява всеки от тях:
- ДЕЙСТВИЯ: Това са обекти, които трябва да имат две свойства, едно, което описва типа (TYPE) на действието и друго, което описва какво трябва да се промени в състоянието на приложението.
- НАМАЛИТЕЛИ- Редукторите са функции, които реализират поведението на действията. Те променят състоянието на приложението в зависимост от описанието на действието и описанието на промяната на състоянието.
- СЪХРАНЕНИЕ: е мястото, където се срещат действия и редуктори, поддържайки и променяйки състоянието на приложението. Има само един.
- ТИПОВЕ: както казах преди, това е типът действие.
Практически пример: Създаване на приложение с Redux
Un пример с помощта на Redux Може да е следното, където просто счетоводно приложение се прави с помощта на Redux. Но за да направите това, първо трябва да конфигурирате Redux и да дефинирате вашите действия и редуктори:
// Импортиране на Redux библиотеки import { createStore } from 'redux'; // Дефиниране на действията const incrementAction = { type: 'INCREMENT' }; const decrementAction = { type: 'DECREMENT' }; // Дефиниране на редуктора const counterReducer = (state = 0, action) => { switch (action.type) { case 'INCREMENT': return state + 1; case 'DECREMENT': състояние на връщане - 1; по подразбиране: състояние на връщане; } }; // Създаване на хранилището на Redux const store = createStore(counterReducer); // Абониране за промени в магазина store.subscribe(() => { console.log('Текущо състояние на брояча:', store.getState()); }); // Изпращане на действия за промяна на състоянието store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(decrementAction);
Това е много прост пример за това как да използвате Redux. В по-голямо приложение бихте дефинирали по-сложни действия и редуктори и бихте свързали React компоненти за достъп и актуализиране на състоянието на магазина. Но поне това ви дава представа как работи...