eslint-plugin-react-redux icon indicating copy to clipboard operation
eslint-plugin-react-redux copied to clipboard

Enforcing best practices for react-redux

eslint-plugin-react-redux

Enforcing best practices for react-redux

Installation

You'll first need to install ESLint:

$ npm i eslint --save-dev

Next, install eslint-plugin-react-redux:

$ npm install eslint-plugin-react-redux --save-dev

Note: If you installed ESLint globally (using the -g flag) then you must also install eslint-plugin-react-redux globally.

Usage

Add react-redux to the plugins section of your .eslintrc configuration file. You can omit the eslint-plugin- prefix:

{
    "plugins": [
        "react-redux"
    ],
    "extends": [
        "plugin:react-redux/recommended"
    ]
}

To configure individual rules:

{
    "rules": {
        "react-redux/connect-prefer-named-arguments": 2
    }
}

Supported Rules

  • react-redux/connect-prefer-minimum-two-arguments Enforces that connect function has at least 2 arguments.
  • react-redux/connect-prefer-named-arguments Enforces that all connect arguments have recommended names.
  • react-redux/mapDispatchToProps-returns-object Enforces that mapDispatchToProps returns an object.
  • react-redux/mapDispatchToProps-prefer-shorthand Enforces that all mapDispatchToProps use a shorthand method to wrap actions in dispatch calls whenever possible.
  • react-redux/mapDispatchToProps-prefer-parameters-names Enforces that all mapDispatchToProps parameters have specific names.
  • react-redux/mapStateToProps-no-store Prohibits binding a whole store object to a component.
  • react-redux/mapStateToProps-prefer-hoisted Flags generation of copies of same-by-value but different-by-reference props.
  • react-redux/mapStateToProps-prefer-parameters-names Enforces that all mapStateToProps parameters have specific names.
  • react-redux/mapStateToProps-prefer-selectors Enforces that all mapStateToProps properties use selector functions.
  • react-redux/useSelector-prefer-selectors Enforces that all useSelector properties use selector functions.
  • react-redux/no-unused-prop-types Extension of a react's no-unused-prop-types rule filtering out false positive used in redux context.
  • react-redux/prefer-separate-component-file Enforces that all connected components are defined in a separate file.