简介
react-redux-es7-flow-snippets 是一个基于 VSCode 编辑器的 npm 包，是一个用来辅助 React+Redux+Flow 的代码编写的工具包，提供了许多常用的代码片段，可以大大提高编写代码的效率。
安装
安装 react-redux-es7-flow-snippets 非常简单，只需要在终端输入以下命令即可：
npm install -g react-redux-es7-flow-snippets
使用方法
在 VSCode 编辑器中，打开任意一个 .js 文件，输入以下代码：
rrfs
然后按下 Tab 键，这时就会自动生成 Redux 的基本模板代码，包括 imports、reducers、actions 和 mapStateToProps。
也可以输入以下代码：
fetch_action
同样按下 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