随着前端技术的飞速发展，我们的代码越来越复杂，难以维护和阅读。如果不采取一些特定的开发工具或者规范，可能会导致一些无意义的错误或者代码错误难于排查的情况。在这样的背景下，eslint 成为了前端开发的重要工具之一，能够帮助开发者避免一些潜在的错误和规范代码风格，提高代码质量和可维护性。
针对 react-redux 应用的需求，推出了 eslint-plugin-react-redux 套件，该套件旨在检测 react-redux 应用中常见的错误和提供一些代码规范。
安装
要安装 eslint-plugin-react-redux ，首先必须安装 eslint ，然后再全局或者局部安装eslint-plugin-react-redux 。执行以下命令安装它们：
npm install eslint --save-dev npm install eslint-plugin-react-redux --save-dev
配置
在 eslint 的配置对象中，您需要添加 react-redux 插件。还可以使用 eslint-config-react-redux 来获取推荐的规则。
.eslintrc.json
-- -------------------- ---- -------
-
---------- -
-------------
--
---------- -
---------------------
---------------------------
--------------------------------
-
-eslint:recommended 是官方推荐的规则，plugin:react/recommended 是 eslint-plugin-react 中的推荐规则，plugin:react-redux/recommended 是 eslint-plugin-react-redux 中的推荐规则。
规则
no-unused-store
这条规则会检测是否存在未被使用的 store，如果发现了未被使用的 store，则会抛出警告信息。
-- -------------------- ---- -------
------ - ------------ --------------- - ---- --------
------ - -------- - ---- --------------
------ ----- ---- --------
------ -------- ---- ------------
----- ------ - ------------------- -- -------
----- ------ - ------------------- -- -------
----- ----------- - --------------------
----------------
--------- ---------------
---------------
------------
-------------------------------
--这段代码会抛出 no-unused-store 警告。 因为 store2 没有被使用。
no-unused-selector-with-mapStateToProps
这条规则会检测是否存在未被使用的 selector，如果发现了未被使用的 selector，则会抛出警告信息。
-- -------------------- ---- -------
------ - ------- - ---- --------------
----- --------------- - ------- -- -
----- --- - -
----- ------
--
------ ----
--
----- ----------------------- - -- ---- -- -- ------------------
------ ------- --------------------------------------------------这段代码会抛出 no-unused-selector-with-mapStateToProps 警告。 因为没有使用 mapStateToProps 函数返回的 obj 对象的 prop 属性。
no-redundant-connect
这条规则会检测是否存在 connect 的重复使用，如果发现了相同的 Higher-Order Components，则会抛出警告信息。
-- -------------------- ---- -------
------ ------ - --------- - ---- --------
------ - ------- - ---- --------------
----- ------------- ------- --------- -
-------- -
------ ---------- -----------------------------
-
-
------ ------- --------------- -- --
--------- ---------------
------------------- -- --
--------- ---------------
--------------------这段代码会抛出 no-redundant-connect 警告。 因为 UserComponent 组件已经被连接过，没有必要再次连接。
结语
eslint-plugin-react-redux 提供了多种规则来检测常见的 react-redux 应用中的错误和规范代码风格。配合使用后不仅可以提高代码质量和可维护性，还能大大减少出现错误的概率。学习如何使用它可以让我们更好地了解代码中可能存在的问题并增强代码的规范性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/5ef047b7efcef77a054b75c2