ReactJS微前端 + SpringBoot后端源码 - Piotr


本文介绍如何使用 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,并在收到后台的响应后传播一个新的事件。

详细点击标题