ReactJS微前端 + SpringBoot後端原始碼 - Piotr

banq發表於2022-10-12
ReactJS前端Spring Boot後端原始碼

本文介紹如何使用 React 構建微前端應用程式：


首先，我們將執行 Spring Boot 應用程式並將其暴露在本地埠上8080。然後我們將執行監聽埠3000並透過 REST API 與後端通訊的 React 應用程式。

我們將使用以下 React 庫：
  • MUI (Material UI for React) – React UI 元件，實現了 Google 的 Material Design 
  • React Redux – Redux JS 的實現，用於 React 使用 store 元件集中應用程式的狀態 
  • Redux Saga – 一個直觀的 Redux 副作用管理器，允許我們非同步排程操作並連線到 Redux 儲存
  • Axios – 用於瀏覽器和 node.js 的基於 Promise 的 HTTP 客戶端
  • React Router – React 的宣告式客戶端路由


透過 REST API 與後端通訊：
與REST客戶端的實現。我們使用Axios庫進行HTTP通訊，使用redux-saga觀察和傳播事件（行動）。對於每種型別的行動，都有兩個函式：
"watch "函式等待被派遣的行動,然後它只是呼叫另一個函式來執行HTTP呼叫。
所有的 "watch "函式都是我們的sagas（事實上它們實現了流行的SAGA模式），所以我們需要在模組外匯出它們。

Axios的客戶端是非常直觀的。我們可以呼叫例如沒有任何引數的GET端點或POST JSON有效載荷。

Redux Saga以非同步方式工作。它監聽行動Action，並在收到後臺的響應後傳播一個新的事件。

詳細點選標題


 

相關文章