npm 包 sinkmvc 使用教程

在前端开发中，常常会用到各种 npm 包来快速构建应用，提高生产效率。而 sinkmvc 就是一个方便快捷的 npm 包，它能帮助我们快速构建一个具备 MVC 架构的前端应用。本文将详细介绍如何使用 sinkmvc 包，并通过实例代码演示其用法，以便读者快速上手。

什么是 sinkmvc

sinkmvc 是一个基于 React 和 Redux 的 npm 包，它提供了一种便捷的方式来构建前端应用的 MVC 模式，其中 sink 表示 Model，而 mvc 表示 View 和 Controller，因此可以说 sinkmvc 相当于是一个 React + Redux 的 MVC 框架。

sinkmvc 的优势

sinkmvc 具有以下几个优点：

  • 支持对 Redux Store 的集中管理，让 state 管理更加方便。
  • 支持自动生成组件的 MapStateToProps 和 MapDispatchToProp 函数，减少编码时间和出错概率。
  • 支持自动与 Router 同步数据，减少代码冗余。
  • 支持同时渲染多个容器，使得复杂的应用也能得到有效的管理。
  • 支持解决跨组件通信问题，使得应用更加健壮。

如何使用 sinkmvc

以下是使用 sinkmvc 的步骤：

  1. 在项目中安装 npm 包：npm install sinkmvc --save
  2. 在项目的入口文件中加入以下代码：
------ ---- ---- ----------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ----------- ---- -------------------------
------ --- ---- -------------------

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

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

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

在上述代码中，我们使用了 React、ReactDOM、Redux、React-Redux 和自己编写的 rootReducer、App 等组件。其中，App 组件是整个应用的最顶层容器，它通过 sink.render() 返回一个渲染结果，然后被 ReactDOM 挂载到页面上。

  1. 在项目中使用 sinkmvc，我们需要自己编写 reducer、action、saga 和 container 组件。其中，reducer 用于管理状态信息，action 用于描述状态变化的方式（即动作），saga 用于异步操作，container 是一个 React 组件，负责组件和 Redux 之间的连接。以 todo 应用为例，我们可以编写以下代码（内容仅供参考）：
-- ----------
----- ------------ - ------ - --- ------- -- -
  ------ ------------- -
    ---- -----------
      ------ -
        ---------
        -
          --- ----------
          ----- ------------
          ---------- -----
        -
      --
    ---- --------------
      ------ -------------- --
        -------- --- ----------
          - --------- ---------- ----------------
          - ----
      --
    --------
      ------ ------
  -
--

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

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

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

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

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

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

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

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

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

在上述代码中，我们使用了 Redux 和 Redux-Saga，来帮助我们管理应用状态和完成异步操作。container 部分，我们使用了 react-redux 的 connect 方法来连接组件和 Redux，实现组件与 Redux 的统一管理。

至此，我们已经完成了使用 sinkmvc 包构建 React + Redux 应用的全部步骤。

sinkmvc 的实例示例

以下是一个使用 sinkmvc 构建的 todo 应用的示例代码（内容仅供参考）：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

在 todo 应用中，我们首先在 rootReducer.js 中定义了应用的状态结构，然后在 App.js 中引用 AddTodo 和 TodoList 两个容器组件，并在其中传递 action 的触发方式和状态的读取方式。

在 AddTodo.js 中，我们实现了一个添加新 todo 的功能，并使用 connect 方法将这个组件连接到 Redux 中，使得组件能够 CRUD 数据

在 Todo.js 中，我们只是定义了一个 todo 的展示方式。

在 TodoList.js 中，我们定义了 todo 列表的展示和更新方式，并且在 componentDidMount 中触发了异步请求所有 todo 的 Action。

在 saga.js 中，我们使用了 Redux-Saga 来处理异步请求，并最终将所有结果存储到 Redux Store 中。

在 api.js 中，我们使用 Promise 模拟了 todo 的读写操作，并将其封装为调用接口。

最后，在组装完 reducer、action、saga 和 container 组件之后，我们只需要像前面提到的一样，在入口文件中以 sinkmvc 的方式使用就好了。

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

阅读全文

猜你喜欢

  • 使用 redux-log-diff 记录 Redux 状态的变化

    Redux 是 React 中应用最广泛的状态管理库，可以帮助我们更好的组织和管理页面状态。但是，随着应用规模的增大，状态管理的难度也会逐渐增加，因此我们需要一些工具来帮助我们更好地跟踪应用的状态变化...

    3 年前
  • npm 包 ultimate-column-chart 使用教程

    ultimate-column-chart 是一款基于 JavaScript 的 npm 包，用于快速生成柱状图，并且可以自定义多个数据系列和样式。本文将详细介绍 ultimate-column-ch...

    3 年前
  • npm 包 ultimate-pie-chart 使用教程

    简介 ultimate-pie-chart 是一款可扩展的、基于 SVG 实现的饼图库。它的特点是使用简单，功能强大，支持定制样式，可以适应不同的业务需求。 在本文中，我们将介绍 ultimate-p...

    3 年前
  • npm 包 arrayinput 使用教程

    在前端开发中，我们时常需要向用户收集一组数据。在这种情况下，使用一个输入框或者下拉框来逐一输入每个元素是很麻烦的。为了解决这个问题，我们可以使用 npm 包 arrayinput 来构建一个方便用户输...

    3 年前
  • npm包express-promisify-callback使用教程

    在开发前端应用时，经常需要使用回调函数来处理异步操作。然而，在编写异步代码时，回调地狱经常会让代码难以维护和理解。为了解决这个问题，Promises已成为了一种非常流行的处理异步代码的方法。

    3 年前
  • npm 包 truthy-keys 使用教程

    前言 在前端开发中，难免会用到一些数据类型的判断和操作。其中最常见的就是判断一个对象是否为空或某个属性是否存在。为了简化这些操作，我们可以使用一个 npm 包，叫做 truthy-keys。

    3 年前
  • npm 包 uniboard-tessel 使用教程

    在前端开发过程中，随着 IoT 技术的不断发展，越来越多的 IoT 设备被用于前端应用中。uniboard-tessel 是一个在 Tessel 2 开发板上运行的 npm 包，它提供了运行和控制该设...

    3 年前
  • npm 包 truthy-strings-keys 使用教程

    在前端开发过程中，经常需要判断对象的属性是否存在或者是否有值，在 JavaScript 中，由于类型的松散性，判断起来比较麻烦。npm 包 truthy-strings-keys 就提供了一种轻松的方...

    3 年前
  • npm 包 eks-alert 使用教程

    在前端项目中，通常需要使用各式各样的组件来帮助开发人员完成工作，比如常用的弹框、提示框、警告框等等。而 eks-alert 是一个基于 React 的 npm 包，可以帮助我们快速地实现各种提示框。

    3 年前
  • npm 包 dap-emoji 使用教程

    在中文交流中，表情符号接近于成为了一种基本的语言表达方式。在日常生活中，我们常常会使用各种表情符号来传达我们的情感和意愿。在前端开发中，如何高效地使用表情符号会成为一项不可或缺的技能。

    3 年前
  • npm包 eks-badge 使用教程

    简介 eks-badge 是一个由 Express Key System 创建的轻量级的开源 npm 包，用于创建带有不同颜色和文本的徽章。它是基于 React 开发的，易于修改其 CSS 样式，具有...

    3 年前
  • npm 包 eks-button 使用教程

    很多前端开发者都会使用一些便捷的 npm 包来完成一些常见的需求。其中，eks-button 是一个非常有用的 npm 包，提供了一些样式漂亮并且易于自定义的按钮组件。

    3 年前
  • npm 包 @luochen1990/es-viz 使用教程

    在前端开发过程中，我们经常会遇到需要调试 JavaScript 代码的场景。@luochen1990/es-viz 是一个基于 AST 的代码可视化工具，可以帮助我们更加直观地了解整个项目的代码结构和...

    3 年前
  • npm 包 eks-breadcrumb 使用教程

    前端开发中，面包屑导航一直是常用的组件之一。而 EKS 是一个专门用于创建企业级 Web 应用程序的框架，它的面包屑导航组件 eks-breadcrumb 也应运而生，大大提高了开发效率和用户体验。

    3 年前
  • npm 包 upstore 使用教程

    简介 upstore 是一个用于将前端静态资源上传至云服务的 npm 包。它可以帮助开发人员将静态资源快速上传到云服务器，提高静态资源访问速度，同时减轻了服务器的负荷。

    3 年前
  • npm 包 @devsupport-ai/instamojo-nodejs 使用教程

    介绍 在现如今高速发展的网络时代，电子商务已经成为人们生活中不可缺少的一部分，而 Instamojo 又是一款很流行的付款和收款平台，通过该平台用户可以在无需代理担保的情况下安全快速进行交易。

    3 年前
  • npm 包 assemblyscript-live-loader 使用教程

    近年来，随着 WebAssembly 技术的逐步成熟，越来越多的前端工程师开始关注 WebAssembly，希望能运用它来构建高性能、跨平台的 Web 应用。而 assemblyscript-live...

    3 年前
  • npm包vtex-recently-viewed使用教程

    在现代的电商网站中，经常会使用“最近浏览”功能。为了实现这一功能，我们可以选择使用 vtex-recently-viewed npm包。这个npm包提供了简单易用的API，帮助开发者快速搭建“最近浏览...

    3 年前
  • npm 包 insight-share-ui 使用教程

    导言 随着互联网的高速发展，人与人之间分享资讯的需求越来越重要。为了满足用户个性化分享的需求，广大前端开发者开始了解和使用 npm 包 insight-share-ui。

    3 年前
  • npm 包 react-native-minimum-calendar 使用教程

    前言 在前端开发中，日历组件是非常常用的组件之一。而在 React Native 开发中，有一个轻量级的 npm 包 —— react-native-minimum-calendar，可以快速地帮我们...

    3 年前

相关推荐

    暂无文章