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

阅读时长 12 分钟读完

简介

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

纠错
反馈