在前端开发中，常常会用到各种 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 的步骤：
- 在项目中安装 npm 包：
npm install sinkmvc --save - 在项目的入口文件中加入以下代码：
-- -------------------- ---- -------
------ ---- ---- ----------
------ ----- ---- --------
------ -------- ---- ------------
------ - ----------- - ---- --------
------ - -------- - ---- --------------
------ ----------- ---- -------------------------
------ --- ---- -------------------
-- ------ --- -----
----- ----- - -------------------------
-- ------ --- ---- -------- ---- --- ----- --- --- ---------
----- ---- - --- ----------- -----
-- ------ --- --- ---- --- ---- --------
----------------
--------- --------------
---------------
------------
-------------------------------
--在上述代码中，我们使用了 React、ReactDOM、Redux、React-Redux 和自己编写的 rootReducer、App 等组件。其中，App 组件是整个应用的最顶层容器，它通过 sink.render() 返回一个渲染结果，然后被 ReactDOM 挂载到页面上。
- 在项目中使用 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