React 是当前最流行的前端框架之一，它的设计思路和生态系统都非常优秀，使得以它为核心的复杂应用也能够方便地开发和维护。Redux 是一种基于 Flux 架构的状态管理工具，能够让我们更好地管理组件之间的数据流。PWA（Progressive Web App）则是一种渐进式 Web 应用的架构思路，通过提供离线访问、桌面推送等功能，将 Web 应用的体验接近原生应用。本文将介绍如何从零开始搭建一个 React + Redux + PWA 应用，并通过示例代码进行详细解释。
创建 React 应用
React 官方提供了一个脚手架工具，可以快速创建 React 应用。首先，我们需要在全局安装该工具：
npm install -g create-react-app
安装完成后，运行以下命令创建一个新的 React 应用：
create-react-app my-app
其中，my-app 是应用的名称，可以自己命名。创建完成后，进入应用目录，并启动开发服务器：
cd my-app npm start
现在我们可以在浏览器中看到应用的界面了。
集成 Redux
接下来，我们需要在应用中集成 Redux。首先，安装 redux、react-redux、redux-thunk 这几个依赖：
npm install --save redux react-redux redux-thunk
然后，在 src 目录下新建 store.js 文件，定义 Redux store 和 middleware：
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ ----- ---- --------------
----- ------------ - ---
----- ------- - ------ - ------------- ------- -- -
------ ------------- -
--------
------ ------
-
--
----- ----- - -------------------- ------------------------
------ ------- ------这里我们只定义了一个空的 reducer 和一个空的状态，实际中应该根据应用的需求来定义。
接下来，在 src/index.js 中引入 store 并将应用包裹在 <Provider> 中：
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--现在，我们就可以在组件中使用 Redux 了。例如，在组件中调用异步请求并将结果存储到 Redux 中：
-- -------------------- ---- -------
------ - ------- - ---- --------------
------ - --------- - ---- ------------
----- ----------- ------- --------------- -
------------------- -
-----------------------
-
-------- -
------ -----------------------------
-
-
----- --------------- - ----- -- --
----- -----------
---
----- ------------------ - -
----------
--
------ ------- ------------------------ ---------------------------------添加 PWA 功能
最后，我们需要将应用转换成 PWA，以提供更好的用户体验。首先，安装 cra-template-pwa，并重新创建一个 PWA 应用：
npm install -g cra-template-pwa create-react-app my-pwa-app --template pwa
其中，my-pwa-app 是应用的名称，同样可以自己命名。创建完成后，启动开发服务器，我们可以在浏览器的开发者工具中看到应用已经成为了 PWA。
现在，我们需要对应用进行一些配置。在 public 目录下，找到 index.html 文件并添加以下 meta 标签：
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="theme-color" content="#000000"> <meta name="description" content="My PWA App"> <link rel="manifest" href="%PUBLIC_URL%/manifest.json"> <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png">
在 public 目录下，新建 manifest.json 文件，并添加以下内容：
-- -------------------- ---- -------
-
------- --- --- -----
------------- --- -----
------------ ----
---------- -------------
-------------- ----------
------------------- ----------
-------- -
-
------ ---------------
-------- ----------
------- -----------
--
-
------ ---------------
-------- ----------
------- -----------
-
-
-这里定义了一些 PWA 的基本信息和图标。现在，我们还需要将应用缓存到本地，以便在离线时也能够使用。在 src/index.js 中，引入 serviceWorker 并注册它：
import * as serviceWorker from './serviceWorker'; serviceWorker.register();
然后，创建 serviceWorker 文件夹，并在其中新建 serviceWorker.js 文件：
-- -------------------- ---- -------
----- ---------- - ----------------------
----- ----------- - ----- ---------------
-------------------------------- ----- -- -
----------------
-----------------------
----------- -- --------------------------
--
---
------------------------------ ----- -- -
------------------
---------------------------
-------------- -- -------- -- ---------------------
--
---这里定义了应用缓存的名字和需要缓存的 URL，以及拦截所有的网络请求并返回缓存数据。我们现在已经完成了 PWA 的搭建。
总结
本文介绍了如何从零开始搭建一个 React + Redux + PWA 应用，并提供了示例代码进行详细解释。了解 React、Redux 和 PWA 后，可以让前端开发更加高效和优秀，提供更优秀的用户体验。我希望这篇文章能够对你有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e2ffc4f6b2d6eab3e4eeea