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 包 @feathers-plus/common 使用教程

    1. 前言 在前端开发中，常常需要使用各种 npm 包来辅助我们完成任务。@feathers-plus/common 就是一个非常实用的 npm 包，它提供了许多工具函数和常用对象，为我们的开发提供了...

    5 年前
  • npm 包 @feathers-plus/cache 使用教程

    在开发前端应用程序时，缓存是一个重要的概念。缓存使得应用程序能够更加快速地响应用户请求，提高了用户体验。@feathers-plus/cache 是一个非常方便的 npm 包，它提供了多种缓存方案，并...

    5 年前
  • npm 包 @feathers-plus/batch-loader 使用教程

    前言 @feathers-plus/batch-loader 是一个可以在 Feathers.js 应用程序中使用的 NPM 包，它提供了一种简单而有效的方法来批量查询数据库并将结果与请求的数据一起发...

    5 年前
  • npm 包 generic-paginate 使用教程

    概述 通常情况下，在前端开发中，我们经常需要用到分页功能。而分页功能的实现代码也是重复性高，繁琐的。 为了方便我们在项目中使用分页功能，有一个 npm 包叫做 generic-paginate，可以帮...

    5 年前
  • npm 包 primitive 使用教程

    在前端开发中，经常需要对图片进行裁剪和处理。而 npm 包 primitive 提供了一种快速简便的方法，可以将图片转换为原始形状的图案。本文将介绍如何使用 npm 包 primitive 来处理图像...

    5 年前
  • npm 包 rest-error 使用教程

    在 Web 应用开发中，错误处理是非常重要的一部分。一个好的错误处理机制可以帮助我们更好地调试代码，减少程序故障的发生，并提高 Web 应用的用户体验。今天，我们来介绍一款名为 rest-error ...

    5 年前
  • npm 包 deco 使用教程

    什么是 deco？ deco 是一个由 Facebook 开发的 JavaScript 装饰器。装饰器可以用来简化代码并使其更加易于理解。deco 可以安装在我们的项目中，并与现有的代码库一起使用。

    5 年前
  • npm 包 baucis-json 使用教程

    简介 baucis-json 是一个用于 Node.js 网络应用程序的后端框架，它提供了一种快速创建 RESTful API 的方式。baucis-json 包可以通过 npm 安装，它可以将 Mo...

    5 年前
  • npm 包 atomify 使用教程

    在前端开发中，我们经常使用 npm 包来解决各种问题。今天，我们来介绍一个非常实用的 npm 包 -- atomify。 什么是 atomify？ atomify 是一个基于 Browserify 的...

    5 年前
  • NPM 包 atomify-js 使用教程

    atomify-js 是一个基于 Browserify，但功能更加强大的前端工具。它不仅支持 JavaScript 的模块化编程，还提供了许多额外的功能，如自动压缩、文件合并、代码转换等。

    5 年前
  • npm 包 atomify-css 使用教程

    如果你是一位前端开发者，那么你一定会熟悉 npm 这个包管理工具。在日常的开发中，我们经常会使用 npm 来引入第三方的库、框架等等。而今天，我们要来介绍一个非常有用的 npm 包，那就是 atomi...

    5 年前
  • npm 包 contentful 使用教程

    如果您是一位前端工程师，并且正在努力构建一个网站或应用程序，那么 contentful 可以帮助您轻松地管理您的内容。Contentful 是一个内容管理系统（CMS），提供了强大的 API 以及用于...

    5 年前
  • npm 包 iobroker.harmony 使用教程

    前言 iobroker.harmony 是一款前端开发者常用的 npm 包，它为前端开发者提供了一种方便易用的方法来控制 Harmony 智能遥控器。在本篇教程中，你将会学习如何使用 iobroker...

    5 年前
  • npm 包 homebridge-harmonyhub-nicoduj 使用教程

    前言 在物联网的应用中，智能家居的需求越来越大。而家庭娱乐系统也作为其中的一个重要组成部分，包括了电视、音响、投影仪等设备。在这些设备上设置成统一的控制器，能够方便地实现对家庭娱乐系统的集中控制。

    5 年前
  • npm包 @types/debug 使用教程

    在前端开发中，使用调试工具能够提高开发效率和准确性，而debug库则是一个非常实用的调试工具。而在TypeScript的开发中，使用npm包 @types/debug 可以获得更好的编码体验和调试能力...

    5 年前
  • npm 包 node-xmpp-stanza 使用教程

    介绍 node-xmpp-stanza 是一个基于 XMPP 协议的 npm 包，它可以让你在 Node.js 应用程序中轻松地发送和接收 XMPP 消息。XMPP（即 Extensible Mess...

    5 年前
  • npm 包 lets-chat 使用教程

    前言 现如今，在大部分公司中，协作沟通都是使用 IM 工具完成的。当然也有很多公司使用公司内部开发的 IM 工具，这样可以满足一些特定的需求。但是，如果没有这样的选择该怎么办呢？此时我们就可以使用开源...

    5 年前
  • npm 包 bixby-xmpp 使用教程

    前言 随着近年来人机交互的不断发展，Web 前端技术的重要性也日益凸显。其中，npm 包已成为前端开发必不可少的工具之一。本篇文章将介绍如何使用 npm 包 bixby-xmpp。

    5 年前
  • npm包node-xmpp-component使用教程

    前言 XMPP是一个开放的、分布式的、基于XML的实时通信协议。它可以用于在不同域之间、不同服务器之间、不同应用程序之间进行实时通信。 node-xmpp-component是一个用于连接XMPP服务...

    5 年前
  • npm 包 parse-reply 使用教程

    作为前端开发人员，我们可能需要经常与后端交互数据。在这个过程中，常常需要解析从后端返回的数据格式。这时候，npm 包 parse-reply 就能够非常方便地帮助我们实现数据解析工作。

    5 年前

相关推荐

    暂无文章