一個帶有Redux狀態管理的本機元件(計數器)的Github專案

banq發表於2019-01-20

這是一個實驗專案,嘗試了原生Web元件:建立了一個Counter元件,並將其嵌入到一個簡單的HTML頁面中三次。將他們連線到Redux的公共儲存,瞧!計數器物件可以使用自己的單獨儲存增加計數了。
  • 建立原生Web元件
  • 在HTML檔案中多次使用它
  • 使用相同的元件,但在其中顯示不同的值
  • 在Redux的幫助下將它們連線到公共儲存

我想使用ES6功能,所以我決定使用Webpack和Babel。Webpack負責使用webpack-dev-server捆綁程式和開發伺服器功能。
其餘的很輕。我建立了一個計數器元件,它有一個顯示數字的顯示,然後有一個按鈕可以幫助你增加數字。我將三次計數器元件插入HTML DOM並將它們連線到一個公共儲存。
Redux商店準備用ID-s獲得三個計數器值,所以我可以單獨處理每個計數器元件的值。
主App模組獲取頁面上的每個計數器值並使用它們生成累積值並將其顯示在計數器上方。

相關文章