@pgilad/eslint-plugin-react-redux
Version:
Find issues with react-redux code usages
65 lines (45 loc) • 1.5 kB
Markdown
# Enforce usage of selector functions on state in mapStateToProps (use-selectors-on-state)
## Rule Details
This rule aims to enforce usage of selectors on state in `mapStateToProps`. It is a bad
design practice to teach the UI component about the structure of the store:
- It prevents re-use of selectors
- Leaves multiple places to refactor if state structure changes
- Prevents using caching (memoize) functions for non-deterministic or expensive selectors
Examples of **incorrect** code for this rule:
```js
const mapStateToProps = state => {
const account = state.account;
return { account };
};
```
```js
const mapStateToProps = state => {
const { account } = state;
return { account };
};
```
```js
const mapStateToProps = state => {
const drone = getDrone(state.drones);
return { account };
};
```
```js
const mapStateToProps = state => {
const droneId = 40;
const drone = state[droneId];
return { account };
};
```
Examples of **correct** code for this rule:
```js
const mapStateToProps = state => {
const account = getAccount(state);
return { account };
};
```
## When Not To Use It
If you don't care about direct state usage in `mapStateToProps` or you don't use `connect` from `react-redux`
## Further Reading
Check out [Reselect](https://www.google.co.il/search?q=reselect&oq=reselect&aqs=chrome.0.0j69i60l2j0l3.2125j1j7&sourceid=chrome&ie=UTF-8)
for a great caching library to be used for expensive/non-deterministic selectors