Catatan Terjemahan : Artikel asli ditulis sebelum MV3 dikenal. Namun demikian, ini sepenuhnya relevan untuk ekstensi MV3 (setidaknya untuk saat ini). Oleh karena itu, saya memutuskan untuk sedikit mengubah namanya, menambahkan penyebutan "MV3", yang tidak bertentangan sama sekali. Jika ada yang tidak tahu: MV3 - format / standar baru untuk ekstensi Chrome, akan diperkenalkan pada Januari 2021.
Artikel ini, ditujukan untuk pengembang web berpengalaman, membahas (dan memecahkan) masalah penggunaan Redux dalam apa yang disebut. ekstensi Chrome yang digerakkan oleh peristiwa ( digerakkan oleh peristiwa).
Kekhususan ekstensi yang digerakkan oleh peristiwa
Model ekstensi berbasis peristiwa pertama kali muncul di Chrome 22 pada tahun 2012. Dalam model ini, skrip latar belakang ekstensi (jika ada) dimuat / dijalankan hanya saat diperlukan (terutama sebagai respons terhadap peristiwa) dan dikeluarkan dari memori saat tidak melakukan apa-apa.
Dokumentasi pengembang Chrome sangat menyarankan penggunaan model berbasis peristiwa untuk semua ekstensi baru, dan bermigrasi untuk ekstensi yang ada menggunakan model persisten . Namun, ada satu pengecualian ( di MV3 tidak lagi relevan, termasuk oleh karena itu transisi ke model baru di MV3 adalah wajib)). Namun tampaknya banyak ekstensi yang masih menggunakan model persisten, meskipun ekstensi tersebut mungkin didorong oleh peristiwa. Tentu saja, banyak dari mereka yang pertama kali dirilis sebelum model berbasis peristiwa dikenal. Dan sekarang penulisnya tidak memiliki insentif untuk beralih ke model baru. Di satu sisi, ini (belum) opsional, tetapi di sisi lain, ini berarti perlu banyak perubahan, tidak hanya di skrip latar belakang, tetapi juga di komponen ekstensi lainnya. Selain itu, banyak yang menggunakan pendekatan lintas browser saat mengembangkan.dengan mengumpulkan ekstensi yang sudah jadi untuk browser yang berbeda dari kode sumber yang sama. Model berbasis peristiwa saat ini hanya didukung di Chrome dan sangat berbeda dari model persisten yang didukung oleh browser lain. Secara alami, ini mempersulit pengembangan lintas-browser.
Namun, beberapa ekstensi Chrome yang relatif lebih baru juga menggunakan model persisten, meskipun dapat digerakkan oleh peristiwa. Pada akhirnya, alasannya sama dengan kasus migrasi: ada perbedaan signifikan antara model yang digerakkan oleh peristiwa dan model persisten, yang terutama diekspresikan dalam cara kami mengelola status ekstensi.
Masalah Redux
— , -. - ( .. ), , . Redux.
Redux — , , . Redux .
, " " — Redux, . ( ), . , Webext Redux, . - - - . .
(persistent) , , . (, ) , . , , Webext Redux.
- , , , , . , , .. ( ). .
, chrome.storage
/ / . ( ) , chrome.storage
, API , .
API chrome.storage
, — . — , , " ".
, , -, . , , .
— API chrome.storage
Redux, Redux. , chrome.storage
, . , Redux - . - chrome.storage
Redux, , Redux chrome.storage
).
— Redux- chrome.storage
, chrome.storage
Redux. API chrome.storage
Redux, (store) Redux. createStore
Store
( Redux). :
, , Store
. ReduxedStorage
.
getState
subscribe
, .. chrome.storage
: get
onChanged
. , Store
, . , get
chrome.storage
ReduxedStorage
, onChanged
, . . getState
. subscribe
: - , onChanged
.
getState
subscribe
, chrome.storage
Store.dispatch
. set
, Redux, Redux , , dispatch
. - dispatch
ReduxedStorage
. . Redux , , Redux. , .
, , - . , , . , dispatch
, , "" createStore
, "" Store.dispatch
, dispatch
. , , , chrome.storage
, . chrome.storage.onChanged
, .
: chrome.storage:get
, . chrome.storage:get
, ( ). , init
, , , chrome.storage:get
. init
Redux, , , chrome.storage
.
ReduxedStorage
:
: chrome.storage
(this.key
), () chrome.storage.onChanged
, chrome.storage:get
. , , .. chrome.storage
.
, , - , this.state
, chrome.storage:set
, . . Redux dispatch
this.state
, , .. this.state
. , . 2- dispatch
this.state
, - chrome.storage:set
. , .
, dispatch
, Redux. ( 100 ), . — . dispatch
:
, , . Redux. , Redux, middleware, Redux Thunk. Redux Thunk , , . :
delayAddTodo
'ADD_TODO'
1 .
dispatch
, this.buffStore.getState
this.buffStore.subscribe
. this.buffStore.subscribe
1 dispatch
, this.buffStore
null
( 100 dispatch
). dispatch
, .. , subscribe
.
, , .. , , Redux. , — , - , delayAddTodo
. , , Redux dispatch
. , this.buffStore
, , lastStore
. , this.buffStore
, lastStore
subscribe
. , subscribe
lastStore
, this.buffStore
, " "). subscribe
, / lastStore
, .
, , ..:
-
this.areaName
,this.key
/ . - , API
chrome.storage
, ,WrappedStorage
.
, :
Penggunaannya mirip dengan Redux asli, kecuali bahwa di antarmuka kami, pembuat toko dibungkus dalam sebuah fungsi dan dijalankan secara asinkron, mengembalikan sebuah janji alih-alih penyimpanan yang dibuat.
Penggunaan standar antarmuka terlihat seperti ini:
Selain itu, dengan sintaks yang async/await
tersedia mulai ES 2017, antarmuka ini dapat digunakan seperti ini:
Kode sumber tersedia di Github.
Antarmuka ini juga tersedia sebagai paket di NPM:
npm install reduxed-chrome-storage