前言
在前端应用开发中，管理状态常常是一个比较困难的问题。前端应用状态的变更可能来自不同的事件，包括用户交互、网络请求、浏览器 URL 变更等。如果我们想要维护一个整个应用的状态，就需要一些工具来帮助我们管理这些变化。
Redux 是一个受到 Flux 设计思想影响的状态容器，它可以帮助我们简化应用状态管理的复杂度。Webpack 则是一个打包工具，它可以帮助我们将前端应用编译、转换、压缩等操作打包成一个或多个文件。在这篇文章中，我们将介绍如何使用 Redux 结合 Webpack 实现一个公共打包配置。
准备工作
在开始之前，我们需要先安装一些必要的工具和依赖。
安装 Webpack
首先，我们需要安装 Webpack。
npm install webpack webpack-cli --save-dev
安装 Redux
接下来，我们需要安装 Redux 和相关的依赖。
npm install redux react-redux redux-thunk --save
应用架构
我们假定我们的前端应用是一个典型的基于 React 的单页应用，结构如下：
-- -------------------- ---- -------
----
--- --------
--- -------
--- -----------
- --- --------------
- --- --------------
--- --------
- --- ----------
- --- ----------
- --- --------
--- ---------
- --- -----------
- --- -----------
- --- --------
--- ------
--- --------其中，index.js 是整个应用的入口，App.jsx 是 React 的根组件，components 目录下存放所有的子组件，actions 目录下存放所有的 action，reducers 目录下存放所有的 reducer，store 目录下存放整个应用的状态容器。
配置 Webpack
接下来，我们需要编写 Webpack 的配置文件，包括入口文件、出口文件、模块解析、插件等。
入口文件
我们需要指定 Webpack 打包的入口文件，也就是整个应用的入口文件 index.js。同时，我们也需要指定输出文件的路径和文件名。我们把它们都写到一个单独的配置文件 webpack.config.js 中。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
----- -----------------
--
------- -
----- ----------------------- --------
--------- ------------
--
--模块解析
我们需要指定 Webpack 对于不同类型的文件的解析方式，包括 JS、CSS、图片等。其中，对于 JS 文件，我们需要使用 Babel 进行转换。
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -
----- -----------------
--
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
--
--
-
----- --------------------------
----- -----------------
--
-
----- -----------------
---- ---------------- ------------- ---------------
--
--
--
--插件
我们需要安装一些 Webpack 插件，例如HtmlWebpackPlugin、CleanWebpackPlugin等。这里我们只介绍一个比较重要的插件 —— webpack.DefinePlugin。这个插件可以帮助我们在打包时将环境变量注入到应用中，这对于我们打包时调试应用，或者区分线上和线下环境非常有用。在开发过程中，我们会根据当前运行的环境设置不同的变量，如果没有设置变量，我们默认为开发环境。
-- -------------------- ---- -------
----- ---- - ----------------
----- ----------------- - -------------------------------
----- - ------------------ - - --------------------------------
----- ------- - -------------------
----- --- - -------------------- --- -------------
-------------- - -
------ -
----- -----------------
--
------- -
----- ----------------------- --------
--------- ------------
--
------- -
------ -
-
----- ----------
-------- ---------------
---- -
------- ---------------
--
--
-
----- --------------------------
----- -----------------
--
-
----- -----------------
---- ---------------- ------------- ---------------
--
--
--
-------- -
--- ----------------------
----------------------- ---------------
--- - ------------- - ------------
--
---
--- -------------------
--------- -------------------
---
--- ---------------------
--
-------- --- - ------------------- - ------
---------- -
---- -----
----- -----
--------- -----
----- -----
--
--Redux 配置
接下来，我们需要配置 Redux，包括 action、reducer、store 等。
Action
我们先来看一下 action，它用于描述某个事件发生后应该如何更新应用的状态。我们可以在 src/actions 目录下定义所有的 action。
-- -------------------- ---- -------
------ ----- -------- - -----------
------ ----- -------- - -----------
------ -------- ---------------- -
------ -
----- ---------
--------
--
-
------ -------- ---------------- -
------ -
----- ---------
--------
--
-Reducer
接下来，我们需要定义 reducer，它用于描述某个 action 发生后应该如何更新应用的状态。我们可以在 src/reducers 目录下定义所有的 reducer。
-- -------------------- ---- -------
------ - --------- -------- - ---- -------------
----- ------------- - -
------ ---
------ ---
--
------ ------- -------- ----------------- - -------------- ------- -
------ ------------- -
---- ---------
------ -
---------
------ ---------------
--
---- ---------
------ -
---------
------ ---------------
--
--------
------ ------
-
-Store
最后，我们需要定义 store，它是整个应用的状态容器。我们可以在 src/store 目录下定义所有的 store。
import { createStore, applyMiddleware } from "redux";
import thunk from "redux-thunk";
import rootReducer from "../reducers";
const store = createStore(rootReducer, applyMiddleware(thunk));
export default store;连接 Redux 和 React
接下来，我们需要将 Redux 和 React 连接起来。我们把这些代码写在 src/index.js 中。
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - -------- - ---- --------------
------ --- ---- --------
------ ----- ---- ----------
----------------
--------- --------------
---- --
------------
-------------------------------
--测试应用
现在，我们已经完成了 Redux 和 Webpack 的配置，我们可以运行开发服务器来测试应用了。
npm run start
这个命令将会启动本地开发服务器，我们可以在 localhost:9000 查看应用。
打包应用
当我们测试完成后，我们可以使用 Webpack 来打包应用。
npm run build
这个命令将会使用 Webpack 打包应用，打包完成后，所有的文件都将被压缩并保存到 dist 目录下。其中，index.html 中将会自动注入打包后的文件。我们只需要将 dist 目录下的所有文件上传到服务器即可。
总结
在这篇文章中，我们介绍了如何使用 Redux 结合 Webpack 实现一个公共打包配置。首先，我们安装了必要的工具和依赖，然后我们编写了 Webpack 的配置文件，最后我们编写了应用的 action、reducer 和 store，并将它们连接到了 React 中。如果您还没有使用 Redux 和 Webpack 开发前端应用，我希望这篇文章能够帮助到你。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649a5da348841e98947414e0