随着前端应用的复杂度和规模的不断增加，前端数据状态的管理变得越来越复杂。为了解决这个问题，Redux 库应运而生，它提供了可预测的状态管理机制，方便了我们对数据状态进行管理、更新和展示。而 preact-router-redux 则是基于 Redux，并与 Preact 轻量化框架结合实现的前端路由控制库，本篇文章将带领大家使用 preact-router-redux 库来构建一个 SPA 单页应用及实现数据状态管理。
安装 preact-router-redux
首先，在你的项目目录中通过 npm 安装 preact-router-redux：
npm install preact-router-redux
创建 Action、Reducer
为了更好地理解 preact-router-redux 的使用，我们先来创建一个简单的应用，并实现数据状态的管理。在我们的应用中，我们将创建一个简单的计数器，包含增加和减少计数器的按钮和一个显示计数值的区域。我们先来创建一个 Redux 应用的基本架构（如果你对 Redux 是不熟悉的，可以先去学习一下 Redux 的基本用法）。
首先，在 src 文件夹下创建一个新文件夹 store，在该文件夹下创建 index.js 文件，作为我们应用的状态管理器。
在 store/index.js 文件中，我们需要定义一个 Reducer 和一些 Action，如下所示：
-- -------------------- ---- -------
----- --------- - ------------
----- --------- - ------------
----- ------------ - -
------ --
--
------ -------- -------------------- - ------------- ------- -
------ ------------- -
---- ----------
------ -
---------
------ ----------- - --
--
---- ----------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
------ -------- ----------- -
------ -
----- ----------
--
-
------ -------- ----------- -
------ -
----- ----------
--
-这里我们定义了一个 counterReducer 作为数据状态管理的核心，它接受一个参数 state 和一个 action，其中 state 为当前的状态，而 action 则为传入的操作，如增加或减少计数器的值。在 counterReducer 中，我们使用 switch 语句来判断不同的操作类型，然后根据不同的操作返回不同的状态值。
接着，我们定义了两个 Action，即增加和减少计数器的值。在 increment 和 decrement 中，我们只需要返回一个包含操作类型 INCREMENT 和 DECREMENT 的对象即可。
创建路由
接下来我们将使用 preact-router-redux 来创建路由控制。在 src 文件夹下，创建一个新文件夹 views，在该文件夹下创建 Counter.js 文件，作为我们应用的视图。
在 Counter.js 中，我们先引入依赖和 Redux 的相关组件和方法：
import { h, Component } from 'preact';
import { connect } from 'react-redux';
import { increment, decrement } from '../store';接着，在 Counter 类的构造函数中，我们使用 bind 绑定方法 handleClickMinus 和 handleClickPlus，以便在后面的代码中使用该方法并调用 Redux 的 dispatch 方法。
-- -------------------- ---- -------
----- ------- ------- --------- -
------------------ -
-------------
--------------------- - ---------------------------------
-------------------- - --------------------------------
-
------------------ -
---------------------------------
-
----------------- -
---------------------------------
-
-------- -
----- - ----- - - -----------
------ -
-----
------------ ------------
------- ------------------------------------------
------- -----------------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------ ------------
--
-
------ ------- ----------------------------------在 Counter 类的 render 函数中，我们使用 JSX 格式的语法来呈现应用的视图。onClick 事件分别绑定了 handleClickMinus 和 handleClickPlus 方法。
而在 connect 函数中，我们将 Counter 组件与 Redux 的管理器以及 mapStateToProps 进行连接，以便在后面的代码中使用 Redux 中的数据。
接下来，我们开始创建路由。在 src 文件夹下的 App.js 文件中，我们引入依赖及组件：
import { h } from 'preact';
import { Provider } from 'react-redux';
import { Router, Route, IndexRoute } from 'preact-router';
import store from './store';
import Counter from './views/Counter';其中，Provider 是 Redux 的提供者，Router 为 preact-router-redux 的核心路由控制组件。
我们在 App 类的 render 函数中，使用 Provider 包裹 Router 组件，并定义了三个路由：/、/counter 和 *。其中，/ 和 * 对应了当前应用的主页和 404 页面，而 /counter 则是我们刚刚创建的计数器视图。
-- -------------------- ---- -------
----- --- ------- --------- -
-------- -
------ -
--------- --------------
--------
----------- ------------------- --
------ --------------- ------------------- --
------ -------- -------------------- --
---------
-----------
--
-
-启动应用
现在，我们的应用已经完成了。为了启动应用，我们需要在 package.json 文件中添加启动命令：
{
"scripts": {
"start": "webpack-dev-server --content-base dist --inline --hot --port 8080 --history-api-fallback",
"build": "webpack --config webpack.prod.config.js"
}
}接着，我们就可以在终端中通过以下命令启动应用：
npm start
启动完成后，我们就可以在本地 http://localhost:8080 进行访问了。
在 /counter 路由下，我们可以看到一个简单的计数器应用。当我们点击 + 或 - 按钮时，计数器的数值会随之增加或减少。
总结
通过本文的一步步指导，我们成功地创建了一个基于 preact-router-redux 的 SPA 单页应用，并实现了数据状态的管理。preact-router-redux 提供了非常方便的路由控制机制，方便了我们对页面的分发与管理。希望读者可以在此基础上深入学习 Redux 和路由的相关知识，探索更多前端技术发展的奥秘。完整示例代码如下所示：
-- -------------------- ---- -------
-- ------------------
----- --------- - ------------
----- --------- - ------------
----- ------------ - -
------ --
--
------ -------- -------------------- - ------------- ------- -
------ ------------- -
---- ----------
------ -
---------
------ ----------- - --
--
---- ----------
------ -
---------
------ ----------- - --
--
--------
------ ------
-
-
------ -------- ----------- -
------ -
----- ----------
--
-
------ -------- ----------- -
------ -
----- ----------
--
-
-- --------------------
------ - -- --------- - ---- ---------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -----------
----- ------- ------- --------- -
------------------ -
-------------
--------------------- - ---------------------------------
-------------------- - --------------------------------
-
------------------ -
---------------------------------
-
----------------- -
---------------------------------
-
-------- -
----- - ----- - - -----------
------ -
-----
------------ ------------
------- ------------------------------------------
------- -----------------------------------------
------
--
-
-
-------- ---------------------- -
------ -
------ ------------
--
-
------ ------- ----------------------------------
-- ----------
------ - - - ---- ---------
------ - -------- - ---- --------------
------ - ------- ------ ---------- - ---- ----------------
------ ----- ---- ----------
------ ------- ---- ------------------
----- --- ------- --------- -
-------- -
------ -
--------- --------------
--------
----------- ------------------- --
------ --------------- ------------------- --
------ -------- -------------------- --
---------
-----------
--
-
-
-- ------------
------ - -- ------ - ---- ---------
------ --- ---- --------
----------- --- ---------------参考资料：
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/93707