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