在 React 的世界中,網頁上的每個東西都視為一個元件 (component),可以自己定義一個 Tag(JSX) ,還可以把簡單的判斷以及動作寫在一起。
store 就是存放各種 state(狀態),簡單的來說就是存放各種資料。而要更改資料,也就是改變狀態,需要透過 dispatcher 發起 action 觸發。
action creator 負責產生 action function,回傳一個物件,裡頭包含了一個 type,說明這是什麼樣的動作。因此 store 收到這個 action 後便能依據 type 的不同修改對應的資料,更動後便能再次 getState 取得最新值並更新到 viewer。
我們來看一下 tangleId 的 file tree,進一步說明他們之間的關係:
$ sudo npm install --unsafe-perm
For dev:
$ npm run dev
For production build:
$ npm run build && npm start
需要更動的部份:
constants
:定義該動作的 action typeactions
: 使用 tangleid apireducers
: 新增 action type 要改的對應 state需要更動的部份:
page
: 新增一個頁面,包含 UI 以及對應的動作其中每個頁面可能會有以下幾個 function
UserClaim.getInitialProps
mapStateToProps
mapDispatchToProps
在 layout 底下的 material 資料夾放的就是使用 material UI 的 Main.js:
TangleId/component
底下(目前 Denny 統一把 material UI 放在 TangleId/component/material
),於 Main.js 下 import 使用地圖上繪製空氣盒子所在地並依觀測數值呈現
能查看單一空氣盒子回報的數據,以及傳送資料的時間
顯示該空氣盒子所處環境
可以指查看指定地區,依縣市分類
參考:g0v 空污觀測
data marketplace 需要向 sensor 購買資料才能夠看到,而目前也僅展示購買 sensor 資料的情況,還未看見 API。
The Data Marketplace is open for everyone to participate right now, and over the coming weeks we will be opening up an API for the marketplace so that anyone can contribute sensors and build new data-driven applications. [2017.11.28]
這個機制正符合了剛開始獎勵機制的設想,也就是,以「幣」為誘因,鼓勵大家投入設置空氣盒子。而與 data marketplace 結合的好處即免除之前 color coin 換算的討論,直接使用 IOTA。
而對 data marketplace 仍有幾點疑問:
登入成功後要顯示個人資料
進入頁面時 loading 很久,且出現如下的畫面:
(firefox 與 chrome 的畫面會不同,以下為 firefox)
render 出頁面或重新整理同一頁面後,跑版,並產生以下 warning
Warning: Prop `className` did not match. Server: "MuiButtonBase-root-61 MuiIconButton-root-55 MuiIconButton-colorInherit-56 PersistentDrawer-menuButton-1075" Client: "MuiButtonBase-root-61 MuiIconButton-root-55 MuiIconButton-colorInherit-56 PersistentDrawer-menuButton-8" warning.js:33
如下圖:
login button 應該在最右邊
Login 的資訊保存在哪裡?
Login 後如何 redirect page?