規劃使用 Zustand 重構的工作分配

[arealclimber]

根據現有程式碼功能，依照 Zustand 規劃重構工作

References

• context re-render
  • https://blog.jannikwempe.com/when-to-not-use-react-context-api-for-state
  • https://medium.com/@viraj.vimu/react-context-api-vs-zustand-state-manager-98ca9ac76904
  • Official doc: 優化 Context 造成的 re-render
• Zustand singleton 沒寫在文件上，只有討論要怎麼使用 non-singleton pattern，等等補上 singleton 實驗
• zustand 實驗 PR
• context 作為對照組 PR (蠟燭圖更新時，新聞 component 也跟著 log)

[arealclimber]

畫圖網站

原本架構的 sequence diagram

title TBD Frontend Original Pattern (e.g. Candlestick chart)

participant Backend
participant Pusher Instance
participant Web Worker Instance
participant Browser
participant App (Context)
participant Worker (Context)
participant Market (Context)
participant Candlestick Chart Component

Browser->App (Context):execute
note over Market (Context),App (Context):Initialize default context data
Market (Context)->Candlestick Chart Component:marketCtx.candlestickChartData

activate Market (Context)

Candlestick Chart Component->Candlestick Chart Component:drawChart()
deactivate Market (Context)

App (Context)->Worker (Context):workerCtx.init()
activate App (Context)
activate Worker (Context)

Worker (Context)->Worker (Context):workerCtx.init() {\ninitPusher()\ninitAPIWorker()\ninitJobQueue()\n}\n

Worker (Context)->Web Worker Instance:apiWorker = createWorkerInstance()\n

activate Web Worker Instance
activate Web Worker Instance

Pusher Instance<-Worker (Context):pusher = createPusherInstance()
deactivate Worker (Context)
deactivate App (Context)

activate Pusher Instance
App (Context)->Market (Context):marketCtx.init()
activate App (Context)

activate Market (Context)

Web Worker Instance<-Worker (Context):apiWorker.postMessage(request)

Market (Context)->Market (Context):marketCtx.init() {\nworkerCtx.requestHandler("currencies")\nworkerCtx.requestHandler("tickers")\nworkerCtx.requestHandler("guaranteed-stop-fee")\n}
Worker (Context)<--Market (Context):requestHandler() {\n createJob()\n apiWorker.onmessage()\n}
activate Market (Context)
activate Worker (Context)
Web Worker Instance-->Worker (Context):apiWorker.onmessage(result)
deactivate Web Worker Instance
Worker (Context)-->Market (Context):result

deactivate Market (Context)
deactivate Market (Context)

deactivate App (Context)
deactivate Worker (Context)

activate Web Worker Instance

activate Market (Context)

Market (Context)->Market (Context):marketCtx.selectTickerHandler() {\nworkerCtx.requestHandler("trades")\nworkerCtx.requestHandler("ticker-static")\nworkerCtx.requestHandler("ticker-live-statistics")\n}\n

Web Worker Instance<-Worker (Context):apiWorker.postMessage(request)

Worker (Context)<--Market (Context):requestHandler() {\n createJob()\n apiWorker()\n}
activate Market (Context)
activate Worker (Context)
Web Worker Instance-->Worker (Context):apiWorker.onmessage(result)
deactivate Web Worker Instance

Worker (Context)-->Market (Context):result
deactivate Market (Context)

deactivate Market (Context)
deactivate Worker (Context)

Backend->Pusher Instance:send("Trades")
Pusher Instance->Worker (Context):pusher.emit("Trades")
activate Pusher Instance

activate Worker (Context)
Market (Context)->Market (Context):setInterval(() => {\nconvertTradesToCandlesticks(); \nsetCandlestickData();\n}, 100)

Market (Context)->Candlestick Chart Component:marketCtx.candlestickChartData\n(every 0.1 secs)
activate Market (Context)
Candlestick Chart Component->Candlestick Chart Component:drawChart()
deactivate Market (Context)
Worker (Context)->Worker (Context):pusher.on("Trades", event.emit("Trades"))
deactivate Pusher Instance

Worker (Context)->Market (Context):event.emit("Trades")\n\n
deactivate Worker (Context)

activate Market (Context)
Market (Context)->Market (Context):event.on("Trades", addTrades())\n
deactivate Market (Context)

使用 Zustand 可能無法保有原本的 Worker 架構 [待測試]

• 還沒實驗，依照找到的資料來推斷
  • https://github.com/pmndrs/zustand/issues/494
  • https://github.com/pmndrs/zustand/discussions/630
  • https://github.com/pmndrs/zustand/issues/151#issuecomment-675514219
  • Working with Zustand

title TBD Frontend Original Pattern (e.g. Candlestick chart)

participant Backend
participant Pusher Instance
participant Web Worker Instance
participant Browser
participant App (Context)
participant Worker (Context)
participant Market (Context)
participant Candlestick Chart Component

Browser->App (Context):execute
note over Market (Context),App (Context):Initialize default context data
Market (Context)->Candlestick Chart Component:marketCtx.candlestickChartData

activate Market (Context)

Candlestick Chart Component->Candlestick Chart Component:drawChart()
deactivate Market (Context)

App (Context)->Worker (Context):workerCtx.init()
activate App (Context)
activate Worker (Context)

Worker (Context)->Worker (Context):workerCtx.init() {\ninitPusher()\ninitAPIWorker()\ninitJobQueue()\n}\n

Worker (Context)->Web Worker Instance:apiWorker = createWorkerInstance()\n

activate Web Worker Instance
activate Web Worker Instance

Pusher Instance<-Worker (Context):pusher = createPusherInstance()
deactivate Worker (Context)
deactivate App (Context)

activate Pusher Instance
App (Context)->Market (Context):marketCtx.init()
activate App (Context)

activate Market (Context)

Web Worker Instance<-Worker (Context):apiWorker.postMessage(request)

note over Market (Context) #b0ceff:用 Zustand 重構的話，Market Store 可能不能調用 Worker Store 的 API request function 來處理 API ，也就無法直接在 Market Store 更新資料，需要在 Component 層級處理 API 並更新全局狀態(Store)
note over Market (Context)#b0ceff :（作者推薦使用單一 store，但似乎有其他方式可以在 store 裡面存取另一個 store 的 function 跟 state 方法，但是不能拿到即時更新的資料https://github.com/pmndrs/zustand/issues/494, https://github.com/pmndrs/zustand/discussions/630）

Market (Context)->Market (Context):marketCtx.init() {\nworkerCtx.requestHandler("currencies")\nworkerCtx.requestHandler("tickers")\nworkerCtx.requestHandler("guaranteed-stop-fee")\n}
Worker (Context)<--Market (Context):requestHandler() {\n createJob()\n apiWorker.onmessage()\n}
activate Market (Context)
activate Worker (Context)
Web Worker Instance-->Worker (Context):apiWorker.onmessage(result)
deactivate Web Worker Instance
Worker (Context)-->Market (Context):result

deactivate Market (Context)
deactivate Market (Context)

deactivate App (Context)
deactivate Worker (Context)

activate Web Worker Instance

activate Market (Context)

Market (Context)->Market (Context):marketCtx.selectTickerHandler() {\nworkerCtx.requestHandler("trades")\nworkerCtx.requestHandler("ticker-static")\nworkerCtx.requestHandler("ticker-live-statistics")\n}\n

Web Worker Instance<-Worker (Context):apiWorker.postMessage(request)

Worker (Context)<--Market (Context):requestHandler() {\n createJob()\n apiWorker()\n}
activate Market (Context)
activate Worker (Context)
Web Worker Instance-->Worker (Context):apiWorker.onmessage(result)
deactivate Web Worker Instance

Worker (Context)-->Market (Context):result
deactivate Market (Context)

deactivate Market (Context)
deactivate Worker (Context)

Backend->Pusher Instance:send("Trades")
Pusher Instance->Worker (Context):pusher.emit("Trades")
activate Pusher Instance

activate Worker (Context)
Market (Context)->Market (Context):setInterval(() => {\nconvertTradesToCandlesticks(); \nsetCandlestickData();\n}, 100)

Market (Context)->Candlestick Chart Component:marketCtx.candlestickChartData\n(every 0.1 secs)
activate Market (Context)
Candlestick Chart Component->Candlestick Chart Component:drawChart()
deactivate Market (Context)
Worker (Context)->Worker (Context):pusher.on("Trades", event.emit("Trades"))
deactivate Pusher Instance

Worker (Context)->Market (Context):event.emit("Trades")\n\n
deactivate Worker (Context)

activate Market (Context)
Market (Context)->Market (Context):event.on("Trades", addTrades())\n
deactivate Market (Context)

[arealclimber]

taking 3 hrs remaining 3 hrs

• 修改 Sequence diagram
  • 起點在最左邊，return void 也需要用虛線指回去
• 參考 event driven sequence diagram

[arealclimber]

The primary use case is a single store. Multiple stores make sense if they are totally isolated. It sounds like for your use case, a single store would be a good pattern.

不推薦 store 存取其他的 store 的值，因為拿不到即時的資料，但是調用別人 store 的 function 可以實驗看看 ref

Zustand Store 是彼此平行的，目前我想到的解決方案有：

方法一：用 store 將 worker 功能包起來，類似之前 worker_context

• 可能需要
  1. global_store 取代 global_context
  2. worker_store 取代 worker_context，提供處理 API 的 function 跟 job queue 確保 API 不會被重複調用
  3. market_store 取代 market_context，需要調用 API 時，嘗試用 .getState() 調用 worker_store 的 function
  4. user_store 取代 user_context
  5. notification_store 取代 notification_store

方法二：實作 worker (Singleton) ，讓需要調用 API 的 store 直接使用 worker instance

• 可能需要
  1. global_store 取代 global_context
  2. market_store 取代 market_context
  3. user_store 取代 user_context
  4. notification_store 取代 notification_store
  5. Instancing Worker (Singleton) ，讓 user_store 跟 market_store 在調用 API 時使用

[arealclimber]

1. 成功註冊 Pusher (WebSocket)
2. 初始化 API worker 成功、調用 API 成功拿到最新資料
3. pusher 推送新的 trades 資料後，context 紀錄新的 trades，然後在每 0.1 秒更新 candlestick chart （待修改）

title TBD Frontend Original Pattern (e.g. Candlestick chart)

participant Browser
participant App (Context)
participant Worker (Context)
participant Market (Context)
participant Candlestick Chart Component

participant Web Worker Class

participant Pusher Class

participant Backend

Browser->App (Context):appCtx.init()
activate App (Context)
activate Browser
App (Context)->Worker (Context):workerCtx.init()
activate Worker (Context)
Worker (Context)->Web Worker Class:new Worker(lib)\n
activate Web Worker Class
Worker (Context)<--Web Worker Class:
deactivate Web Worker Class
Pusher Class<-Worker (Context):new Pusher(config)
activate Pusher Class
Worker (Context)<--Pusher Class:
deactivate Pusher Class

App (Context)<--Worker (Context):
deactivate Worker (Context)

App (Context)->Market (Context):marketCtx.init()
activate Market (Context)
group marketCtx.init("currencies","tickers","guaranteed-stop-fee")
Worker (Context)<--Market (Context):requestHandler() {\n createJob()\n apiWorker.onmessage()\n}
activate Worker (Context)
Web Worker Class<-Worker (Context):apiWorker.postMessage(request)
activate Web Worker Class
Web Worker Class-->Worker (Context):apiWorker.onmessage(result)
Worker (Context)->Market (Context):result
end

Market (Context)->Market (Context):marketCtx.selectTickerHandler() {\nworkerCtx.requestHandler("trades")\nworkerCtx.requestHandler("ticker-static")\nworkerCtx.requestHandler("ticker-live-statistics")\n}\n
Worker (Context)<--Market (Context):requestHandler() {\n createJob()\n apiWorker()\n}
Web Worker Class<-Worker (Context):apiWorker.postMessage(request)
Web Worker Class-->Worker (Context):apiWorker.onmessage(result)
deactivate Web Worker Class
Worker (Context)->Market (Context):result
deactivate Worker (Context)
App (Context)<--Market (Context):

deactivate Market (Context)
Browser<--App (Context):
deactivate App (Context)

Browser->Market (Context):render()
activate Market (Context)
Market (Context)->Candlestick Chart Component:marketCtx.candlestickChartData
activate Candlestick Chart Component
Candlestick Chart Component->Candlestick Chart Component:drawChart()
Market (Context)<--Candlestick Chart Component:
deactivate Candlestick Chart Component

Browser<--Market (Context):
deactivate Browser
deactivate Market (Context)

Backend->Pusher Class:send("Trades")
Pusher Class->Pusher Class:pusher.emit("Trades")\n
Pusher Class->Worker (Context):broadcast("Trades")

Pusher Class<--Worker (Context):
Worker (Context)->Worker (Context):pusher.on("Trades", event.emit("Trades"))
Worker (Context)->Market (Context):broadcast("Trades")\n\n
Market (Context)->Market (Context):event.on("Trades", addTrades())\n
Market (Context)->Market (Context):setInterval(() => {\nconvertTradesToCandlesticks(); \nsetCandlestickData();\n}, 100)

Market (Context)->Candlestick Chart Component:marketCtx.candlestickChartData\n(every 0.1 secs)

Candlestick Chart Component->Candlestick Chart Component:drawChart()

Browser<--Candlestick Chart Component:

[arealclimber]

taking 7 hrs https://github.com/CAFECA-IO/TideBit-DeFi/pull/1450

• 實驗
  • 可以調用其他 store 的非同步 function，用在調用 API 的話，可以 await functionFromOtherStore() 拿到資料；但是調用 API 需要放在 queue 裡面的話，不會等到被執行才 return，也就是等不到 API 的結果
  • 同一個 store 裡面的Ａ值透過非同步 function 更改，不會讓拿Ｂ值渲染的 component 重新渲染
  • 在 child component 因為 state from store 瘋狂改變而瘋狂 re-render，不會影響跟他平行的 component 以及 parent component
  • parent component 渲染會影響 child component 渲染
  • Zustand singleton 測試：在<TestResult />跟 <TestResult1 />渲染 marketStore 的 testResult ，在 <TestResult /> 每5秒使用 marketStore 的 setTestResult()，確認 marketStore 是單一的，不會被重複創造
• 開會討論重構

[arealclimber]

透過 #1451 #1454 #1457 ，將 context 依照更新頻率從 market context 另外分出 ticker context 跟 candlestick context，以及 context 之間透過 event 溝通 ，就能避免重複渲染不必要的元件，用 Zustand 重構需要的時間與其能達成的效益不符，雖然能使程式碼更簡潔、增加可讀性，但 TideBit DeFi 需要平行溝通的 context 不多，所以先不需要用 Zustand 重構。