តើអ្វីទៅជា Redux: អ្វីគ្រប់យ៉ាងដែលអ្នកត្រូវដឹងអំពីបណ្ណាល័យនេះ។

ប្រសិនបើអ្នកនៅតែមិនដឹង តើ Redux គឺជាអ្វីនៅក្នុងអត្ថបទនេះ យើងនឹងផ្តោតទៅលើការពន្យល់អ្វីគ្រប់យ៉ាងដែលអ្នកគួរដឹងអំពីបណ្ណាល័យនេះ។ JavaScriptក៏ដូចជាការប្រើប្រាស់របស់វា របៀបដែលវាអាចប្រើបាន។ល។ វិធីនេះ អ្នកនឹងមានឧបករណ៍ចាំបាច់ទាំងអស់ ដើម្បីអាចបញ្ចូលវាទៅក្នុងគម្រោង JS បន្ទាប់របស់អ្នក។

ចាំ​មើល​ថា Redux យ៉ាង​ណា​!

តើ JavaScript ជាអ្វី?

JavaScript (JS)គឺជាភាសាសរសេរកម្មវិធីដែលបានបកប្រែ។ វាត្រូវបានគេចាត់ទុកថាជាគ្រាមភាសានៃស្តង់ដារ ECMAScript ហើយត្រូវបានកំណត់លក្ខណៈដោយការតម្រង់ទិសវត្ថុ ផ្អែកលើគំរូ ភាពចាំបាច់ វាយអក្សរខ្សោយ និងថាមវន្ត។ ទោះបីជាឈ្មោះរបស់វាក៏ដោយ ក៏វាមិនគួរច្រឡំជាមួយ Java ដែរ។ ការបង្កើតរបស់វាគឺផ្អែកលើការពិចារណាផ្នែកពាណិជ្ជកម្ម បន្ទាប់ពីការទិញយក Sun Microsystems (អ្នកបង្កើត Java) ដោយ Netscape Navigator (អ្នកបង្កើត LiveScript) និងការផ្លាស់ប្តូរឈ្មោះនៃភាសាសរសេរកម្មវិធី។

ជាចម្បង ប្រើនៅខាងអតិថិជនបង្កើតជាផ្នែកសំខាន់មួយនៃកម្មវិធីរុករកបណ្ដាញ។ នេះអនុញ្ញាតឱ្យអ្នកកែលម្អចំណុចប្រទាក់អ្នកប្រើ និងបង្កើតទំព័របណ្ដាញថាមវន្ត។ លើសពីនេះ JavaScript អាច​ត្រូវ​បាន​ប្រើ​នៅ​ខាង​ server ដែល​គេ​ស្គាល់​ថា Server-side JavaScript ឬ SSJS។ ការអនុវត្តរបស់វាលាតសន្ធឹងហួសពីគេហទំព័រ ស្វែងរកការប្រើប្រាស់ក្នុងឯកសារ PDF និងកម្មវិធីកុំព្យូទ័រលើតុ ធាតុក្រាហ្វិកជាចម្បង។ល។

La វាក្យសម្ព័ន្ធ JavaScript ប្រហាក់ប្រហែលនឹងភាសាដូចជា C ++ និង Javaទោះបីជាវាទទួលយកឈ្មោះ និងអនុសញ្ញាពី Java ដូច្នេះឈ្មោះរបស់វា។ ប៉ុន្តែដូចដែលខ្ញុំបានលើកឡើងពីមុន វាជារឿងសំខាន់ដែលត្រូវកត់សម្គាល់ថា ទោះបីជាឈ្មោះស្រដៀងគ្នារបស់វាក៏ដោយ Java និង JavaScript មានអត្ថន័យ និងគោលបំណងផ្សេងគ្នា។

ម៉្យាងវិញទៀត យើងត្រូវចាំថា JavaScript ប្រើការប្រតិបត្តិនៃ Document Object Model (DOM) ហើយនោះ JS គឺជាភាសាសរសេរកម្មវិធីតែមួយគត់ដែល browsers យល់ពីដើម. ដំបូង វា​ត្រូវ​បាន​ប្រើ​នៅ​ក្នុង​គេហទំព័រ 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 ។
• កម្មវិធី Internet of Things (IoT)៖ វាត្រូវបានប្រើក្នុងការអភិវឌ្ឍកម្មវិធី និងប្រព័ន្ធសម្រាប់ឧបករណ៍ IoT ដោយសារតែសមត្ថភាពរបស់វាក្នុងការទំនាក់ទំនងជាមួយផ្នែករឹង និងឧបករណ៍ចាប់សញ្ញាតាមរយៈ APIs និងបណ្ណាល័យឯកទេស។

តើ Redux គឺជាអ្វី ហើយតើវាដំណើរការយ៉ាងដូចម្តេច?

Redux គឺជាបណ្ណាល័យ JavaScript ប្រភពបើកចំហ ដែល​ត្រូវ​បាន​ប្រើ​ដើម្បី​គ្រប់​គ្រង​រដ្ឋ​ក្នុង​កម្មវិធី និង​ទទួល​ឥទ្ធិពល​ដោយ​ភាសា​មុខងារ Elm។ ជារឿយៗវាត្រូវបានផ្សំជាមួយបណ្ណាល័យផ្សេងទៀតដូចជា React ឬ Angular ដើម្បីបង្កើតចំណុចប្រទាក់អ្នកប្រើប្រាស់។ វាត្រូវបានបង្កើតឡើងដោយ Dan Abramov និង Andrew Clark ដែលត្រូវបានបំផុសគំនិតដោយបណ្ណាល័យ Facebook ដែលមានឈ្មោះថា Flux ។

និយាយជាទូទៅ Redux គឺជាបណ្ណាល័យតូចមួយដែលមាន a API សាមញ្ញ និងមានកំណត់រចនាឡើងដើម្បីដើរតួជាធុងដែលអាចព្យាករណ៍បានសម្រាប់ស្ថានភាពកម្មវិធី។ ប្រតិបត្តិការរបស់វាគឺស្រដៀងទៅនឹងគំនិតនៃ "កាត់បន្ថយ" នៅក្នុងកម្មវិធីមុខងារ។

ប្រវត្តិសាស្រ្តនៃ Redux មានកាលបរិច្ឆេទត្រឡប់ទៅ 2015 នៅពេលដែល Dan Abramov បានចាប់ផ្តើមបង្កើតកំណែដំបូងនៃ Redux ខណៈពេលដែលកំពុងរៀបចំដើម្បីថ្លែងសុន្ទរកថានៅក្នុងសន្និសីទ React Europe អំពី Hot Reloading ។ ក្នុងអំឡុងពេលដំណើរការនេះ Abramov បានកត់សម្គាល់ពីភាពស្រដៀងគ្នារវាងលំនាំ Flux និងមុខងារកាត់បន្ថយ។ ការសង្កេតនេះបាននាំឱ្យគាត់ឆ្ងល់ថាតើហាង Flux ពិតជាអាចជាមុខងារកាត់បន្ថយ។

ដើម្បីអនុវត្តគំនិតនេះ Abramov បានទាក់ទង Andrew Clark ដែលជាអ្នកនិពន្ធនៃការអនុវត្ត Flux ហៅថា Flummox ។ ពួកគេបានសហការគ្នាដើម្បីនាំយក Redux ទៅកាន់ជីវិត និងកំណត់ API រួមមួយ។ លើសពីនេះទៀតពួកគេបានអនុវត្តសមត្ថភាព ផ្នែកបន្ថែមដោយប្រើឧបករណ៍កណ្តាល និងឧបករណ៍កែលម្អហាងដែលបានរួមចំណែកយ៉ាងសំខាន់ដល់ប្រព័ន្ធអេកូ Redux បច្ចុប្បន្ន ពង្រីកលទ្ធភាពរបស់វាបន្ថែមទៀត។

ទំនាក់ទំនង Redux និង React៖ តើ React ជាអ្វី?

React គឺជាបណ្ណាល័យ JavaScript ដែលផ្តោតលើការបង្កើតចំណុចប្រទាក់អ្នកប្រើប្រាស់ ទោះបីជាភាពបត់បែនរបស់វាលើសពីនិយមន័យនោះក៏ដោយ។ ឧបករណ៍នេះ ដែលត្រូវបានបង្កើតឡើងដោយ Facebook ដំបូងឡើយ គឺជាប្រភពបើកចំហ និងត្រូវបានប្រើប្រាស់យ៉ាងទូលំទូលាយ ដោយសារតែសមត្ថភាពក្នុងការបង្កើតចំណុចប្រទាក់អ្នកប្រើប្រាស់យ៉ាងឆាប់រហ័សនៅក្នុងកម្មវិធីជាច្រើន រួមទាំងកម្មវិធីគេហទំព័រតែមួយ (SPA) និងកម្មវិធី Android និង iOS ។

មិនដូចក្របខ័ណ្ឌផ្សេងទៀតដូចជា Angular ដែលផ្តល់នូវវិធីសាស្រ្តស្មុគស្មាញជាង React គឺ លេចធ្លោសម្រាប់សមត្ថភាពបង្កើតចំណុចប្រទាក់អ្នកប្រើប្រាស់ ប្រកបដោយប្រសិទ្ធភាព។ នេះត្រូវបានសម្រេចតាមរយៈការប្រើប្រាស់ឯកសារ .jsx ដែលរួមបញ្ចូលគ្នានូវតក្កវិជ្ជា និងចំណុចប្រទាក់អ្នកប្រើប្រាស់នៅក្នុងឯកសារតែមួយ ហើយត្រូវបានរៀបចំជាឯកតាដែលហៅថា សមាសភាគ។

Virtual DOM៖ តើវាជាអ្វី?

នៅពេលដែលយើងស្វែងយល់ពីពិភពនៃ ReactJS យើងប្រហែលជាបានលឺជាញឹកញាប់អំពីគោលគំនិតនៃ DOM និម្មិត. គំនិតនេះមានប្រភពចេញពីគំនិតដ៏ប៉ិនប្រសប់មួយ៖ ជំនួសឱ្យការធ្វើបច្ចុប្បន្នភាព DOM ពិតប្រាកដទាំងមូល យើងគ្រាន់តែកែប្រែផ្នែកដែលពិតជាត្រូវការការផ្លាស់ប្តូរប៉ុណ្ណោះ។ នៅក្នុងកម្មវិធី JavaScript ចាស់ យើងធ្លាប់ទទួលទិន្នន័យក្នុងទម្រង់ JSON ពីម៉ាស៊ីនមេ ហើយបន្ទាប់មកបង្កើត HTML ថ្មីពេញលេញដើម្បីបង្ហាញ ដែលបណ្តាលឱ្យមានការធ្វើឱ្យទំព័រទាំងមូលឡើងវិញនៅលើការកែប្រែនីមួយៗ។

របៀបដំឡើង និងកំណត់រចនាសម្ព័ន្ធ Redux នៅក្នុងគម្រោងរបស់អ្នក។

ប្រសិនបើអ្នកចង់ដឹង។ របៀបដំឡើង Reduxការពិតគឺថាវាមិនស្មុគស្មាញទាល់តែសោះ។ ដើម្បីធ្វើដូច្នេះអ្នកត្រូវទៅកាន់ស្ថានីយ ហើយពីទីនោះអ្នកត្រូវតែប្រតិបត្តិពាក្យបញ្ជាខាងក្រោម៖

npm i -S redux

ឥឡូវនេះអ្នកមានកំណែថេរនៃ Redux ដែលបានដំឡើងនៅលើប្រព័ន្ធរបស់អ្នក។ ជាការពិតណាស់ អ្នកប្រហែលជាត្រូវដោះស្រាយភាពអាស្រ័យមួយចំនួន ដូចជាមាន npm ដែលជាកម្មវិធីគ្រប់គ្រងកញ្ចប់ Node.js ត្រូវបានដំឡើង។ នៅពេលដែលវារួចរាល់ យើងនឹងដំឡើង React ដែលអ្នកនឹងត្រូវទាញយកអត្ថប្រយោជន៍ពី Redux ក៏ដូចជាឧបករណ៍សម្រាប់អភិវឌ្ឍន៍ ដើម្បីអាចចាប់ផ្តើមបង្កើតគម្រោងរបស់អ្នក។

ដើម្បីដំឡើងកញ្ចប់ផ្សេងទៀតទាំងនេះ ពាក្យបញ្ជាដែលអ្នកត្រូវតែប្រតិបត្តិគឺ៖

npm i -S react-redux npm i -D redux-devtools

ឥឡូវនេះអ្នកនឹងមានអ្វីៗគ្រប់យ៉ាងរួចរាល់ដើម្បីចាប់ផ្តើម។ ប្រសិនបើអ្នកចូលទៅកាន់ថតមេ ឬថតឯកសារដែល Redux ត្រូវបានដំឡើង អ្នកនឹងឃើញថាមានថតរង ឬថតរងជាច្រើនដូចជា STORE, REDUCERS, ACTIONS, TYPES។ អ្នក​ត្រូវ​ដឹង​ថា​អ្វី​ជា​អ្វី​មួយ​:

• សកម្មភាព៖ ទាំងនេះគឺជាវត្ថុដែលត្រូវតែមានលក្ខណៈសម្បត្តិពីរ ដែលមួយពិពណ៌នាអំពីប្រភេទ (TYPE) នៃសកម្មភាព និងមួយទៀតដែលពិពណ៌នាអំពីអ្វីដែលគួរត្រូវបានផ្លាស់ប្តូរនៅក្នុងស្ថានភាពនៃកម្មវិធី។
• អ្នកកាត់បន្ថយ- ឧបករណ៍កាត់បន្ថយគឺជាមុខងារដែលអនុវត្តអាកប្បកិរិយានៃសកម្មភាព។ ពួកគេផ្លាស់ប្តូរស្ថានភាពនៃកម្មវិធី អាស្រ័យលើការពិពណ៌នាអំពីសកម្មភាព និងការពិពណ៌នាអំពីការផ្លាស់ប្តូររដ្ឋ។
• ហាង៖ គឺជាកន្លែងដែលសកម្មភាព និងអ្នកកាត់បន្ថយជួបគ្នា រក្សា និងផ្លាស់ប្តូរស្ថានភាពនៃកម្មវិធី។ មានតែមួយ។
• TYPES ។៖ ដូចដែលខ្ញុំបាននិយាយពីមុន វាគឺជាប្រភេទនៃសកម្មភាព។

ឧទាហរណ៍ជាក់ស្តែង៖ ការបង្កើតកម្មវិធីជាមួយ Redux

Un ឧទាហរណ៍ដោយប្រើ Redux វាអាចមានដូចខាងក្រោម ដែលកម្មវិធីគណនេយ្យសាមញ្ញមួយត្រូវបានធ្វើឡើងដោយប្រើ Redux ។ ប៉ុន្តែដើម្បីធ្វើដូច្នេះ អ្នកត្រូវតែកំណត់រចនាសម្ព័ន្ធ Redux ជាដំបូង ហើយកំណត់សកម្មភាព និងឧបករណ៍កាត់បន្ថយរបស់អ្នក៖

// នាំចូលបណ្ណាល័យ Redux នាំចូល { createStore } ពី 'redux'; // កំណត់សកម្មភាព const incrementAction = { ប្រភេទ: 'INCREMENT' }; const decrementAction = { ប្រភេទ៖ 'DECREMENT' }; // កំណត់អ្នកកាត់បន្ថយ const counterReducer = (ស្ថានភាព = 0, សកម្មភាព) => { switch (action.type) { case 'INCREMENT': return state + 1; ករណី 'DECREMENT': ស្ថានភាពត្រឡប់ - 1; លំនាំដើម៖ ស្ថានភាពត្រឡប់; } }; // បង្កើត Redux store const store = createStore(counterReducer); // ជាវការផ្លាស់ប្តូរនៅក្នុងហាង store.subscribe(() => { console.log('Current counter state:', store.getState()); }); // សកម្មភាពបញ្ជូនដើម្បីកែប្រែ state store.dispatch(incrementAction); store.dispatch(incrementAction); store.dispatch(បន្ថយសកម្មភាព);

នេះគឺជាឧទាហរណ៍សាមញ្ញបំផុតនៃរបៀបប្រើ Redux ។ នៅក្នុងកម្មវិធីធំជាងនេះ អ្នកនឹងកំណត់សកម្មភាពស្មុគស្មាញ និងឧបករណ៍កាត់បន្ថយ ហើយភ្ជាប់សមាសធាតុ React ដើម្បីចូលប្រើ និងធ្វើបច្ចុប្បន្នភាពស្ថានភាពហាង។ ប៉ុន្តែយ៉ាងហោចណាស់នេះផ្តល់ឱ្យអ្នកនូវគំនិតអំពីរបៀបដែលវាដំណើរការ ...