在现代的 Web 应用程序中，消息通知是一个非常重要的功能。React 全家桶是一个流行的前端框架，它提供了许多工具和库，可以帮助我们快速开发 Web 应用程序。在这篇文章中，我们将使用 React 全家桶来实现一个简单的消息通知模块。
技术栈
在实现消息通知模块时，我们将使用以下技术：
- React：一个用于构建用户界面的 JavaScript 库。
- React Router：一个用于构建单页应用程序的路由库。
- Redux：一个状态管理库，用于管理应用程序的状态。
- React-Redux：React 和 Redux 的集成库。
- Redux-Saga：一个用于管理应用程序副作用的库。
实现
设计
在我们开始编码之前，让我们先设计一下我们的消息通知模块。我们的模块应该具有以下功能：
- 显示当前用户的未读消息数量。
- 显示当前用户的消息列表。
- 当用户点击消息时，将其标记为已读。
- 当用户标记所有消息为已读时，将未读消息数量归零。
- 当用户收到新消息时，自动更新未读消息数量。
创建 React 应用程序
我们将使用 Create React App 来创建我们的应用程序。在终端中输入以下命令：
npx create-react-app notification-app cd notification-app
安装依赖项
我们需要安装 React Router、Redux、React-Redux 和 Redux-Saga。在终端中输入以下命令：
npm install react-router-dom redux react-redux redux-saga
添加路由
我们的应用程序将有两个页面：消息列表和消息详情。我们将使用 React Router 来管理路由。在 src 目录下创建一个名为 routes.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ----- - ---- -------------------
------ ---------------- ---- --------------------------------
------ ------------------ ---- ----------------------------------
----- ------ - -- -- -
--------
------ ----- -------- ---------------------------- --
------ ------------------------- ------------------------------ --
---------
--
------ ------- -------创建 Redux Store
我们将使用 Redux 来管理应用程序的状态。在 src 目录下创建一个名为 store.js 的文件，并添加以下代码：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ -------------------- ---- ------------- ------ ----------- ---- ------------- ------ -------- ---- ---------- ----- -------------- - ----------------------- ----- ----- - ------------ ------------ -------------------------------- -- ----------------------------- ------ ------- ------
在上面的代码中，我们创建了一个 Redux Store，并将 Redux Saga 中间件应用于它。我们还将 rootSaga 作为参数传递给 sagaMiddleware.run() 函数。
创建 Redux Reducer
我们需要创建一个 Redux Reducer 来管理应用程序的状态。在 src 目录下创建一个名为 reducers.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ - --------------- - ---- --------
------ -
----------------------------
----------------------------
----------------------------
----------------------------------
----------------------------------
----------------------------------
---------------------------------------
---------------------------------------
---------------------------------------
- ---- ------------
----- ------------ - -
-------------- ---
------------ --
---------- ------
------ -----
--
----- -------------------- - ------ - --------------------------- ------- -- -
------ ------------- -
---- ----------------------------
------ -----------------------------
---- ----------------------------------
------ ---------------------- --
--------------- --- -----------------
- - ---------------- ------- ---- -
- -------------
--
---- ---------------------------------------
------ ---------------------- -- -- ---------------- ------- ---- ----
--------
------ ------
-
--
----- ------------------ - ------ - ------------------------- ------- -- -
------ ------------- -
---- ----------------------------
------ ---------------------------
---- ----------------------------------
------ ----- - --
---- ---------------------------------------
------ --
--------
------ ------
-
--
----- ---------------- - ------ - ----------------------- ------- -- -
------ ------------- -
---- ----------------------------
---- ----------------------------------
---- ---------------------------------------
------ -----
---- ----------------------------
---- ----------------------------
---- ----------------------------------
---- ----------------------------------
---- ---------------------------------------
---- ---------------------------------------
------ ------
--------
------ ------
-
--
----- ------------ - ------ - ------------------- ------- -- -
------ ------------- -
---- ----------------------------
---- ----------------------------------
---- ---------------------------------------
------ ---------------------
---- ----------------------------
---- ----------------------------
---- ----------------------------------
---- ----------------------------------
---- ---------------------------------------
---- ---------------------------------------
------ -----
--------
------ ------
-
--
----- ----------- - -----------------
-------------- ---------------------
------------ -------------------
---------- -----------------
------ -------------
---
------ ------- ------------在上面的代码中，我们定义了四个 Redux Reducer：notificationsReducer、unreadCountReducer、isLoadingReducer 和 errorReducer。这些 Reducer 管理应用程序的不同方面的状态。
创建 Redux Action
我们需要创建 Redux Action 来更新应用程序的状态。在 src 目录下创建一个名为 actions.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ----- --------------------------- - ------------------------------
------ ----- --------------------------- - ------------------------------
------ ----- --------------------------- - ------------------------------
------ ----- --------------------------------- - ------------------------------------
------ ----- --------------------------------- - ------------------------------------
------ ----- --------------------------------- - ------------------------------------
------ ----- -------------------------------------- - -----------------------------------------
------ ----- -------------------------------------- - -----------------------------------------
------ ----- -------------------------------------- - -----------------------------------------
------ ----- ------------------------- - -- -- --
----- ----------------------------
---
------ ----- ------------------------- - ------------- -- --
----- ----------------------------
-------- -
--------------
------------ --------------------------------- -- -----------------------------
--
---
------ ----- ------------------------- - ----- -- --
----- ----------------------------
-------- -
------
--
---
------ ----- ----------------------------- - -- -- --
----- ----------------------------------
-------- -
---
--
---
------ ----- ----------------------------- - -- -- --
----- ----------------------------------
-------- -
---
--
---
------ ----- ----------------------------- - ----- -- --
----- ----------------------------------
-------- -
------
--
---
------ ----- --------------------------------- - -- -- --
----- ---------------------------------------
---
------ ----- --------------------------------- - -- -- --
----- ---------------------------------------
---
------ ----- --------------------------------- - ----- -- --
----- ---------------------------------------
-------- -
------
--
---在上面的代码中，我们定义了 Redux Action，它们将被用于更新应用程序的状态。
创建 Redux Saga
我们需要创建 Redux Saga 来处理应用程序的副作用。在 src 目录下创建一个名为 sagas.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ - ----- ---- --------- - ---- ---------------------
------ -
----------------------------
--------------------------
--------------------------
----------------------------------
------------------------------
------------------------------
---------------------------------------
----------------------------------
----------------------------------
- ---- ------------
----- ------------ - ---------------------------------------
--------- -------------------- -
--- -
----- -------- - ----- ----------- -------------------------
----- ------------- - ----- --------------- ---------
----- ----------------------------------------------
- ----- ------- -
----- --------------------------------------
-
-
--------- ------------------------ ------- -- -
--- -
----- ----------- -------------------------------------- -
------- --------
----- ---------------- ------- ---- ---
---
----- -----------------------------------------------
- ----- ------- -
----- ------------------------------------------
-
-
--------- ---------------------------- -
--- -
----- ----------- ------------------------ -
------- --------
----- ---------------- ------- ---- ---
---
----- -----------------------------------------
- ----- ------- -
----- ----------------------------------------------
-
-
--------- ---------- -
----- -------------------------------------- --------------------
----- -------------------------------------------- ------------------------
----- ------------------------------------------------- ----------------------------
-
------ ------- ---------在上面的代码中，我们定义了三个 Redux Saga：fetchNotifications、markNotificationAsRead 和 markAllNotificationsAsRead。这些 Saga 处理应用程序的副作用，并根据结果更新应用程序的状态。
创建 React 组件
现在我们可以创建我们的 React 组件了。在 src/components 目录下创建一个名为 NotificationList.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ---- - ---- -------------------
------ -
--------------------------
------------------------------
----------------------------------
- ---- -------------
----- ---------------- - -- -- -
----- -------- - --------------
----- ------------- - ----------------- -- ---------------------
----- ----------- - ----------------- -- -------------------
----- --------- - ----------------- -- -----------------
----- ----- - ----------------- -- -------------
------------ -- -
--------------------------------------
-- ------------
----- ---------------- - -- -- -
--------------------------------------------
--
----- ------------------- - -- -- -
----------------------------------------------
--
------ -
-----
----------------------
--------- ------ -----------------
---------- -- ------------------
------ -- -----------------------
------------------------------- -- -
---- ----------------------
-----
----------------------------------------
-------- ------ ------------------- - --------- - ----- --
-
--------------------
-------
--------------------- -- -
------- ----------- -- -----------------------------------
---- -- ----
---------
--
------
---
------------ - - -- -
------- ---------------------------------- --- -- -------------
--
------
--
--
------ ------- -----------------在上面的代码中，我们定义了一个名为 NotificationList 的 React 组件。这个组件显示用户的未读消息数量和消息列表，并允许用户将消息标记为已读。
我们还定义了 handleMarkAsRead 和 handleMarkAllAsRead 函数，它们将被用于处理用户的交互。
在 src/components 目录下创建一个名为 NotificationDetail.js 的文件，并添加以下代码：
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------------ ----------- - ---- --------------
------ - ----- --------- - ---- -------------------
------ - ----------------------------- - ---- -------------
----- ------------------ - -- -- -
----- -------- - --------------
----- - -- - - ------------
----- ------------ - ----------------- --
------------------------------------- -- --------------- --- ------------
--
------------ -- -
-- ------------- -- --------------------- -
---------------------------------------------------------
-
-- ---------- ---------------
------ -
-----
---------------- -----------
----- ----------- -- --------------------
------------- - -
-----
-----------------------------
--------------------------
------
- - -
--------------- --- ---------
--
------
--
--
------ ------- -------------------在上面的代码中，我们定义了一个名为 NotificationDetail 的 React 组件。这个组件显示消息的详细信息，并在用户访问消息详情页面时将消息标记为已读。
添加样式
最后，我们可以为我们的应用程序添加一些样式。在 src 目录下创建一个名为 index.css 的文件，并添加以下代码：
a {
text-decoration: none;
}
button {
margin-left: 1rem;
}在 src/index.js 文件中，我们可以将这个样式文件导入到我们的应用程序中：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ - ------------- - ---- -------------------
------ ----- ---- ----------
------ ------ ---- -----------
------ --------------
----------------
--------- --------------
---------------
------- --
----------------
------------
--------------------------------
--示例代码
你可以在 GitHub 上查看完整的示例代码。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d394f6a941bf71346d434e
