UNPKG

@pgilad/eslint-plugin-react-redux

Version:
65 lines (45 loc) 1.5 kB
# 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