Што такое Redux: усё, што вам трэба ведаць аб гэтай бібліятэцы

Redux

Калі вы ўсё яшчэ не ведаеце што такое Redux, у гэтым артыкуле мы збіраемся засяродзіцца на тлумачэнні ўсяго, што вы павінны ведаць аб гэтай бібліятэцы JavaScript, а таксама яго выкарыстанне, як яго можна выкарыстоўваць і г.д. Такім чынам, вы будзеце мець усе неабходныя інструменты, каб мець магчымасць інтэграваць яго ў наступныя праекты JS.

Давайце паглядзім, што такое Redux!

Што такое JavaScript?

зыходны код мовы праграмавання

JavaScript (JS), з'яўляецца інтэрпрэтаванай мовай праграмавання. Ён лічыцца дыялектам стандарту ECMAScript і характарызуецца тым, што з'яўляецца аб'ектна-арыентаваным, заснаваным на прататыпе, імператыўным, слаба тыпізаваным і дынамічным. Нягледзячы на ​​назву, яго не варта блытаць з Java. Яго стварэнне заснавана на камерцыйных меркаваннях пасля набыцця Netscape Navigator (стваральніка LiveScript) Sun Microsystems (стваральніка Java) і змены назвы мовы праграмавання.

Галоўным чынам выкарыстоўваецца на баку кліента, з'яўляючыся неад'емнай часткай вэб-браўзераў. Гэта дазваляе палепшыць карыстацкі інтэрфейс і ствараць дынамічныя вэб-старонкі. Акрамя таго, JavaScript можна выкарыстоўваць на баку сервера, вядомы як JavaScript на баку сервера або SSJS. Яго прымяненне выходзіць за межы Інтэрнэту, знаходзячы выкарыстанне ў PDF-дакументах і настольных праграмах, галоўным чынам у віджэтах і г.д.

З 2012 года ўсе сучасныя браўзеры забяспечваюць поўную падтрымку ECMAScript 5.1, версіі JavaScript. І, вядома, сучасныя вэб-браўзеры цалкам сумяшчальныя з JS, што дазваляе актываваць або дэактываваць гэты тып кода, калі гэта неабходна, ці то для бяспекі, каб дэактываваць некаторыя сродкі абароны ад капіравання тэксту, якія ёсць на некаторых вэб-сайтах і г.д.

La Сінтаксіс JavaScript нагадвае сінтаксіс такіх моў, як C++ і Java, хоць ён прымае назвы і канвенцыі з Java, адсюль і яго назва. Але, як я ўжо згадваў раней, важна адзначыць, што, нягледзячы на ​​падобныя назвы, Java і JavaScript маюць розную семантыку і мэты.

З іншага боку, мы павінны памятаць, што JavaScript выкарыстоўвае рэалізацыю аб'ектнай мадэлі дакумента (DOM), і што JS - гэта адзіная мова праграмавання, якую браўзеры разумеюць на роднай мове. Першапачаткова ён выкарыстоўваўся ў вэб-старонках HTML для аперацый на кліенце без доступу да сервера. Аднак сёння ён шырока выкарыстоўваецца для адпраўкі і атрымання інфармацыі з сервера, часта ў спалучэнні з такімі тэхналогіямі, як AJAX. JavaScript інтэрпрэтуецца ў карыстальніцкім агенте, а аператары спампоўваюцца разам з кодам HTML.

Прыкладання JS

JavaScript - гэта мова праграмавання, якая шырока выкарыстоўваецца ў розных праграмах і кантэкстах, такіх як:

  • Вэб-распрацоўка: Гэта важна ў вэб-распрацоўцы. Ён выкарыстоўваецца для паляпшэння інтэрактыўнасці і карыстацкага досведу на вэб-сайтах і вэб-прыкладаннях. Ён выкарыстоўваецца для стварэння інтэрактыўных формаў, візуальных эфектаў, праверкі дадзеных у рэжыме рэальнага часу і дынамічнай навігацыі, сярод іншага. Прысутнічае ў:
    • Вэб-інтэрфейс: Гэта краевугольны камень інтэрфейснай распрацоўкі. Такія фрэймворкі і бібліятэкі, як 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

Redux - гэта бібліятэка JavaScript з адкрытым зыходным кодам які выкарыстоўваецца для кіравання станам у праграмах і пад уплывам функцыянальнай мовы Elm. Ён часта спалучаецца з іншымі бібліятэкамі, такімі як React або Angular, для стварэння карыстальніцкіх інтэрфейсаў. Ён быў задуманы Дэнам Абрамавым і Эндру Кларкам, якія былі натхнёныя бібліятэкай Facebook пад назвай Flux.

Наогул кажучы, Redux - гэта невялікая бібліятэка з a Просты і абмежаваны API, распрацаваны, каб дзейнічаць як прадказальны кантэйнер для стану прыкладання. Яго праца падобная на канцэпцыю «змяншэння» ў функцыянальным праграмаванні.

Гісторыя Redux бярэ пачатак з 2015 год, калі Дэн Абрамаў пачаў распрацоўку першай версіі Redux падчас падрыхтоўкі да выступу на канферэнцыі React Europe аб гарачай перазагрузцы. Падчас гэтага працэсу Абрамаў заўважыў падабенства паміж шаблонам Flux і функцыяй рэдуктара. Гэта назіранне прымусіла яго задумацца, ці сапраўды крама 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) дзеяння, і другую, якая апісвае, што трэба змяніць у стане праграмы.
  • РЭДУКЦЫІ- Рэдуктары - гэта функцыі, якія рэалізуюць паводзіны дзеянняў. Яны змяняюць стан праграмы ў залежнасці ад апісання дзеяння і апісання змены стану.
  • STORE: гэта месца, дзе сустракаюцца дзеянні і рэдуктары, падтрымліваючы і змяняючы стан праграмы. Ёсць толькі адзін.
  • Тыпы: як я ўжо казаў, гэта тып дзеяння.

Практычны прыклад: стварэнне прыкладання з Redux

Un прыклад выкарыстання Redux Гэта можа быць наступнае, дзе простае бухгалтарскае прыкладанне створана з дапамогай Redux. Але каб зрабіць гэта, вы павінны спачатку наладзіць Redux і вызначыць свае дзеянні і рэдуктары:

ЗАЎВАГА: калі вы не ведаеце мовы праграмавання JS і не ўмееце працаваць з React, вам варта вывучыць яе перад пачаткам працы з 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 для доступу і абнаўлення стану крамы. Але, па меншай меры, гэта дае вам уяўленне аб тым, як гэта працуе ...


Будзьце першым, каб каментаваць

Пакіньце свой каментар

Ваш электронны адрас не будзе апублікаваны. Абавязковыя для запаўнення палі пазначаныя *

*

*

  1. Адказны за дадзеныя: Мігель Анхель Гатон
  2. Прызначэнне дадзеных: Кантроль спаму, кіраванне каментарыямі.
  3. Легітымнасць: ваша згода
  4. Перадача дадзеных: Дадзеныя не будуць перададзены трэцім асобам, за выключэннем юрыдычных абавязкаў.
  5. Захоўванне дадзеных: База дадзеных, размешчаная Occentus Networks (ЕС)
  6. Правы: у любы час вы можаце абмежаваць, аднавіць і выдаліць сваю інфармацыю.