npm 包 preact-router-redux 使用教程

面试官：小伙子，你的代码为什么这么丝滑？

随着前端应用的复杂度和规模的不断增加，前端数据状态的管理变得越来越复杂。为了解决这个问题，Redux 库应运而生，它提供了可预测的状态管理机制，方便了我们对数据状态进行管理、更新和展示。而 preact-router-redux 则是基于 Redux，并与 Preact 轻量化框架结合实现的前端路由控制库，本篇文章将带领大家使用 preact-router-redux 库来构建一个 SPA 单页应用及实现数据状态管理。

安装 preact-router-redux

首先，在你的项目目录中通过 npm 安装 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 的相关组件和方法：

------ - -- --------- - ---- ---------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -----------

接着，在 Counter 类的构造函数中，我们使用 bind 绑定方法 handleClickMinus 和 handleClickPlus，以便在后面的代码中使用该方法并调用 Redux 的 dispatch 方法。

----- ------- ------- --------- -
  ------------------ -
    -------------
    --------------------- - ---------------------------------
    -------------------- - --------------------------------
  -

  ------------------ -
    ---------------------------------
  -

  ----------------- -
    ---------------------------------
  -

  -------- -
    ----- - ----- - - -----------
    ------ -
      -----
        ------------ ------------
        ------- ------------------------------------------
        ------- -----------------------------------------
      ------
    --
  -
-

-------- ---------------------- -
  ------ -
    ------ ------------
  --
-

------ ------- ----------------------------------

在 Counter 类的 render 函数中，我们使用 JSX 格式的语法来呈现应用的视图。onClick 事件分别绑定了 handleClickMinus 和 handleClickPlus 方法。

而在 connect 函数中，我们将 Counter 组件与 Redux 的管理器以及 mapStateToProps 进行连接，以便在后面的代码中使用 Redux 中的数据。

接下来，我们开始创建路由。在 src 文件夹下的 App.js 文件中，我们引入依赖及组件：

------ - - - ---- ---------
------ - -------- - ---- --------------
------ - ------- ------ ---------- - ---- ----------------
------ ----- ---- ----------
------ ------- ---- ------------------

其中，Provider 是 Redux 的提供者，Router 为 preact-router-redux 的核心路由控制组件。

我们在 App 类的 render 函数中，使用 Provider 包裹 Router 组件，并定义了三个路由：/、/counter 和 *。其中，/ 和 * 对应了当前应用的主页和 404 页面，而 /counter 则是我们刚刚创建的计数器视图。

----- --- ------- --------- -
  -------- -
    ------ -
      --------- --------------
        --------
          ----------- ------------------- --
          ------ --------------- ------------------- --
          ------ -------- -------------------- --
        ---------
      -----------
    --
  -
-

启动应用

现在，我们的应用已经完成了。为了启动应用，我们需要在 package.json 文件中添加启动命令：

-
  ---------- -
    -------- ------------------- -------------- ---- -------- ----- ------ ---- ------------------------
    -------- -------- -------- -----------------------
  -
-

接着，我们就可以在终端中通过以下命令启动应用：

--- -----

启动完成后，我们就可以在本地 http://localhost:8080 进行访问了。

在 /counter 路由下，我们可以看到一个简单的计数器应用。当我们点击 + 或 - 按钮时，计数器的数值会随之增加或减少。

总结

通过本文的一步步指导，我们成功地创建了一个基于 preact-router-redux 的 SPA 单页应用，并实现了数据状态的管理。preact-router-redux 提供了非常方便的路由控制机制，方便了我们对页面的分发与管理。希望读者可以在此基础上深入学习 Redux 和路由的相关知识，探索更多前端技术发展的奥秘。完整示例代码如下所示：

-- ------------------
----- --------- - ------------
----- --------- - ------------

----- ------------ - -
  ------ --
--

------ -------- -------------------- - ------------- ------- -
  ------ ------------- -
    ---- ----------
      ------ -
        ---------
        ------ ----------- - --
      --
    ---- ----------
      ------ -
        ---------
        ------ ----------- - --
      --
    --------
      ------ ------
  -
-

------ -------- ----------- -
  ------ -
    ----- ----------
  --
-

------ -------- ----------- -
  ------ -
    ----- ----------
  --
-

-- --------------------
------ - -- --------- - ---- ---------
------ - ------- - ---- --------------
------ - ---------- --------- - ---- -----------

----- ------- ------- --------- -
  ------------------ -
    -------------
    --------------------- - ---------------------------------
    -------------------- - --------------------------------
  -

  ------------------ -
    ---------------------------------
  -

  ----------------- -
    ---------------------------------
  -

  -------- -
    ----- - ----- - - -----------
    ------ -
      -----
        ------------ ------------
        ------- ------------------------------------------
        ------- -----------------------------------------
      ------
    --
  -
-

-------- ---------------------- -
  ------ -
    ------ ------------
  --
-

------ ------- ----------------------------------

-- ----------
------ - - - ---- ---------
------ - -------- - ---- --------------
------ - ------- ------ ---------- - ---- ----------------
------ ----- ---- ----------
------ ------- ---- ------------------

----- --- ------- --------- -
  -------- -
    ------ -
      --------- --------------
        --------
          ----------- ------------------- --
          ------ --------------- ------------------- --
          ------ -------- -------------------- --
        ---------
      -----------
    --
  -
-

-- ------------
------ - -- ------ - ---- ---------
------ --- ---- --------

----------- --- ---------------

参考资料：

来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/93707

阅读全文

猜你喜欢

  • npm 包 microgateway-plugins 使用教程

    简介 在 Node.js 应用中，包管理工具 npm 是必不可少的一环。npm 可以让我们方便地安装和使用大量的插件和库。而 microgateway-plugins 就是一个 Node.js 应用中...

    5 年前
  • npm 包 `volos-analytics-common` 使用教程

    在前端开发中，我们经常需要使用各种不同的工具和模块来帮助我们完成不同的任务。NPM（Node Package Manager）就是其中一个用于管理和分享 Node.js 模块的工具，而 volos-a...

    5 年前
  • NPM 包 Piston 使用教程

    Piston 是一个基于 JavaScript 的代码执行器，可以在 Node.js 和浏览器中使用。它支持多种编程语言，如 Rust、Python、Ruby、Go 和 JavaScript 等。

    5 年前
  • npm 包 pen 使用教程

    在前端开发的过程中，经常会用到画图工具，尤其是需要在网页上实现绘图功能时更是如此。而 npm 包 pen 就是一个非常不错的选择，它基于 HTML5 Canvas 技术，提供了丰富的图形处理功能，可以...

    5 年前
  • npm 包 divshot-cli 使用教程

    简介 divshot-cli 是一个基于 Node.js 的命令行工具，可以帮助我们快速创建、构建和部署静态网站。

    5 年前
  • npm 包 @untool/express 使用教程

    在今天的 Web 开发中，应用程序的状态管理和渲染往往相互依赖，并且开发者需要同时面对大量的技术和茫茫无际的代码库。为此，前端开发者需要恰当的组织和管理自己的项目，通过面向功能的，模块化的编码方法达到...

    5 年前
  • npm 包 @untool/core 使用教程

    什么是 @untool/core？ @untool/core 是一个基于 Node.js 和 webpack 的应用工具集。它可以让你构建服务器渲染的 React 应用、单页面应用或静态网站，也支持开...

    5 年前
  • npm 包 hops-build 使用教程

    简介 hops-build 是一个用于构建跨平台服务器渲染 React 应用程序的npm包。 它提供了一种快速、可靠和灵活的方式，用于构建应用程序，并支持多个服务器端上的渲染器，例如Express、 ...

    5 年前
  • npm 包 hops-plugin 使用教程

    随着前端技术的不断发展，npm 成为了前端开发中必不可少的工具之一。其中，hops-plugin 是一款非常实用的 npm 包，可以帮助开发者快速进行 webpack 配置和开发环境搭建。

    5 年前
  • npm 包 Hops 使用教程

    Hops 是一个基于 React 的应用程序框架，它能够帮助开发者快速搭建高性能、可扩展的 Web 应用。它提供了一系列的工具，让开发者可以快速进行开发、测试和部署。

    5 年前
  • npm 包 static-router 使用教程

    引言 在前端开发中，我们经常需要使用路由管理页面的跳转和状态等，通常我们会使用框架提供的路由功能，比如 Vue-Router 或 React-Router 等。但对于小型项目或者纯静态页面，引入这些框...

    5 年前
  • npm 包 regular 使用教程

    在前端开发中，正则表达式是一种十分重要的工具。npm 上有许多正则表达式相关的包，其中 regular 就是十分实用的一款。本文将为大家介绍 regular 的使用教程，并给出实用的示例代码。

    5 年前
  • npm 包 is-success 使用教程

    在前端开发中，成功和失败状态的展示及提示是非常重要的一个细节，而 is-success 是一个专门用于生成成功状态的 npm 包，本文将为大家介绍如何使用该包来生成漂亮的成功状态提示。

    5 年前
  • npm 包 globject 使用教程

    npm 包 globject 使用教程 全局对象是 JavaScript 中最强大的概念之一，它允许我们像访问变量一样访问某些值，而不必显式地传递它们作为参数。在前端开发中，我们常常需要在全局范围内访...

    5 年前
  • npm 包 cache-header 使用教程

    作为前端开发人员，我们知道在开发过程中使用了很多工具和库。而其中一个最常用的工具就是 npm。在我们的项目中，我们会安装很多依赖项，这些依赖项都存储在本地的 npm 仓库中。

    5 年前
  • npm 包 fuzzaldrin 使用教程

    在前端开发中，我们常常需要使用字符串匹配相关的操作，比如搜索、排列、过滤等等。其中，模糊搜索是一种非常常用的操作，而 fuzzaldrin 就是一款出色的 npm 包，它提供了快速、精确的模糊搜索功能...

    5 年前
  • npm 包 bitcoinjs-adventure 使用教程

    简介 bitcoinjs-adventure 是一个基于 JavaScript 的 Bitcoin 库，它提供了一些常用的 Bitcoin 操作方法，如创建钱包、签署交易、验证交易等。

    5 年前
  • npm 包 mix-into 使用教程

    前言 在前端开发中，如何优雅地组织代码是一个经常被提及的话题。在代码的设计阶段，我们通常会用到 mixin（混合）这个概念来解决一些重复代码的问题。在 JavaScript 中，我们可以通过一些工具库...

    5 年前
  • npm 包 awe 使用教程

    简介 awe 是一款强大的前端 UI 组件库，基于 Vue.js 开发，提供了丰富的组件和插件，适用于多种场景。本文将介绍如何使用 npm 包 awe，并提供详细的指导和示例代码。

    5 年前
  • npm 包 apiboxs 使用教程

    简介 apiboxs 是一个用于快速搭建网站或应用程序的 npm 包，它提供了一系列的功能模块和 API，包括但不限于用户认证、文件上传、数据存储等等。使用 apiboxs 可以大大减少前端开发的时间...

    5 年前

相关推荐

    暂无文章