npm 包 react-redux-es7-flow-snippets 使用教程

简介

react-redux-es7-flow-snippets 是一个基于 VSCode 编辑器的 npm 包，是一个用来辅助 React+Redux+Flow 的代码编写的工具包，提供了许多常用的代码片段，可以大大提高编写代码的效率。

安装

安装 react-redux-es7-flow-snippets 非常简单，只需要在终端输入以下命令即可：

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

使用方法

在 VSCode 编辑器中，打开任意一个 .js 文件，输入以下代码：

----

然后按下 Tab 键，这时就会自动生成 Redux 的基本模板代码，包括 imports、reducers、actions 和 mapStateToProps。

也可以输入以下代码：

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

同样按下 Tab 键，这时就会自动生成一个常见的异步请求流程，包括开始请求（request）、请求失败（failure）、请求成功（success）等状态。

还有更多的代码片段可以使用，例如：

  • rcd 自动生成 Redux 的 constant 代码，并定义好 reducer 及 action。
  • rscu 创建 React component 并定义 PropTypes、connect、mapStateToProps 和 mapDispatchToProps 等基础部分代码。
  • ed 创建 Immutable.js 的默认对象。
  • lod 引入 lodash 库。
  • 等等。

流程详解

rrfs – Redux 基本模板

输入 rrfs 后按下 Tab 键，就能生成一个基本的 Redux 模板，包括 imports、reducers、actions 和 mapStateToProps。其中，rrfs 的含义是：

  • r – Redux。
  • rf – Redux 的基础。
  • s – Selector。
  • mapS – mapStateToProps。

这个代码片段的实现方式如下：

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

其中，[ 和 ] 包括的部分是可选的。代码可以根据实际需求进行修改。

fetch_action – 异步请求流程

输入 fetch_action 后按下 Tab 键，就可以生成一个简单的异步请求流程，包括 request、success 和 failure 状态返回。其中，fetch_action 的含义是：

  • fetch – 异步请求。
  • _a – Action。
  • t – Type。

这个代码片段的实现方式如下：

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

其他代码片段

除了上面两个常见的代码片段外，还有许多其他的代码片段在实际开发中也会用到。可以在 VSCode 编辑器中输入 rrfs 后查看所有可以使用的代码片段。这里只列出一些常用的代码片段：

rscu – React Component

React Component 代码片段，根据实际情况可以修改名称、PropTypes、mapStateToProps 等部分内容。其中，r 的含义是 React，scu 的含义是 shouldComponentUpdate。

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

rcd – Redux constant

Redux constant 代码片段，根据实际情况可以修改名称。这里的 $1 表示一个参数。其中，r 的含义是 Redux，cd 的含义是 constant+dispatcher。

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

ed – Immutable.js

Immutable.js 的默认对象。

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

lod – Lodash

引入 lodash 库，包括 cloneDeep、isEqual、isEmpty 等方法。

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

以上是常见的一些代码片段，还有很多其他的代码片段可以在实际开发中使用。

总结

react-redux-es7-flow-snippets 可以大大提高编写 React+Redux+Flow 代码的效率，是一个非常实用的 VSCode 编辑器插件。在使用过程中，可以根据实际需求进行代码修改和拓展，让自己的代码更加高效和实用。

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

阅读全文

猜你喜欢

  • npm 包 @makeomatic/sendpulse-api 使用教程

    简介 @makeomatic/sendpulse-api 是一个 Node.js 的 npm 包，用于通过 SendPulse API 调用发送邮件和短信。 本教程将介绍如何使用这个 npm 包，并提...

    3 年前
  • npm 包 davidejs 使用教程

    在前端开发中，选择合适的工具包和框架是至关重要的，这些工具可以让我们更高效的完成我们的工作。其中，davidejs 是一款非常实用的插件，它为我们提供了一个强大的工具来创建响应式和互动的 Web 应用...

    3 年前
  • npm 包 anitube-get 使用教程

    随着网络流行，越来越多的人开始关注动漫。如果你是一个动漫爱好者，那么你肯定熟悉一个叫做 anitube 的网站。如果你想要在你的前端开发项目中获取来自于 anitube 的最新信息，你可以使用 npm...

    3 年前
  • npm 包 echo.io 使用教程

    简介 echo.io 是一个基于 WebSocket 的实时通信库，它可以让你更方便地构建实时应用程序。在本教程中，我们将介绍如何使用 npm 包 echo.io。

    3 年前
  • npm 包 ffi-ianli 使用教程

    简介 Node.js 作为一种后端运行时的平台，它的前端能力也在逐渐提升。Node.js 提供了许多模块和 API，以扩展其功能。其中，使用 FFI（Foreign Function Interfac...

    3 年前
  • npm 包 habitica-cli 使用教程

    简介 Habitica 是一个非常有趣的习惯养成应用，它将生活中的目标、任务和习惯转换成一个角色扮演游戏，让你可以愉快地养成好习惯。habitica-cli 是一个 Habitica 的命令行工具，它...

    3 年前
  • npm 包 pluginify 使用教程

    前言 在前端开发中，我们经常会使用一些第三方库或插件来丰富我们的项目。为了方便使用这些库或插件，我们通常会通过 npm 包管理工具来安装和管理这些包。而 npm 包 pluginify 就是一款能够将...

    3 年前
  • npm 包 gulp-dogespork 使用教程

    在前端开发中，自动化构建工具的使用是必不可少的，而 Gulp 是其中比较流行的一种。在 Gulp 生态圈中，有许多插件可供选择，而 gulp-dogespork 就是其中之一。

    3 年前
  • NPM 包 Dragend 使用教程

    什么是 Dragend？ Dragend 是一款轻量级、高度可定制化的 JavaScript 插件，用于创建支持滑动和拖拽过渡效果的网站。可用于创建滑块、画廊和幻灯片等功能。

    3 年前
  • npm 包 paypal_payment 使用教程

    前言 随着数字支付的普及，越来越多的网站和应用集成了支付方式。PayPal 是一种全球性的支付方式，是商家和消费者广泛使用的在线支付品牌。针对前端开发者，有一个 npm 包 paypal_paymen...

    3 年前
  • 使用 gulp-replace-file-references 进行前端开发中的文件路径替换

    在进行前端开发时，我们经常需要修改文件路径，比如替换资源引用路径、修改 HTML 页面中的脚本和样式表路径等等。这些修改操作会给我们带来很多烦恼，因为手动修改不仅费时费力，而且容易出错。

    3 年前
  • npm包robotois-rgb-leds 使用教程

    在前端开发中，控制硬件设备的需求是越来越多，这时候 npm 包就派上了用场。在这篇文章中，我们将介绍如何使用 npm 包 robotois-rgb-leds 来控制 RGB 灯。

    3 年前
  • npm 包 download.js 使用教程

    引言 download.js 是一款可以通过浏览器下载文件的 Node.js 模块。该模块可以将文件下载链接直接通过代码下载至本地，而不需要用户手动点击下载链接，从而改善用户体验。

    3 年前
  • npm 包 find-esm-packages 使用教程

    简介 在前端项目中，我们经常需要引入其他 npm 包作为依赖。通常情况下，这些包都是 CommonJS 格式的，而在现代前端开发中，使用 ES Modules（ESM） 格式的包也越来越普遍。

    3 年前
  • npm 包 hearthstone-watcher 使用教程

    作为前端开发人员，我们经常需要监控一些实时数据，以便快速响应和处理相关问题。对于 Hearthstone 玩家来说，他们需要实时监控游戏中的卡牌数据等信息，以便在游戏中做出最佳决策。

    3 年前
  • npm 包 graphql-socketio-subscriptions-transport 使用教程

    随着现代 web 应用程序的复杂性和需求的增加，更多的应用程序开始使用实时通信解决方案。GraphQL 是一种非常流行的数据查询和操作语言，而 Socket.IO 是一种实时通信解决方案，因此这两种技...

    3 年前
  • npm 包 isit-code-kohler 使用教程

    前言 在开发过程中，我们经常需要对代码进行评审和优化，而不同的开发风格和标准也会影响代码的质量。isit-code-kohler 就是一个可以帮助我们评审和验证代码质量的 npm 包。

    3 年前
  • npm 包 pizzajs 使用教程

    介绍 pizzajs 是一个基于原生 JavaScript 实现的模态窗口库，可以方便地在网页中创建模态窗口。pizzajs 的特点在于它非常轻巧、易用且功能强大。

    3 年前
  • npm 包 od-tsplay 使用教程

    介绍 od-tsplay 是一个基于 TypeScript 和 Node.js 的开发工具包，封装了常用的工具函数和类，可用于 Node.js 和浏览器环境下的前端开发。

    3 年前
  • npm 包 isit-site-tools-kohler 使用教程

    什么是 isit-site-tools-kohler? isit-site-tools-kohler 是一款基于 Node.js 的 NPM 工具，该工具能够帮助前端开发者对 Github 上托管的项...

    3 年前

相关推荐

    暂无文章