use-selectors-on-state.md

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:

const mapStateToProps = state => {
    const account = state.account;

    return { account };
};

const mapStateToProps = state => {
    const { account } = state;

    return { account };
};

const mapStateToProps = state => {
    const drone = getDrone(state.drones);

    return { account };
};

const mapStateToProps = state => {
    const droneId = 40;
    const drone = state[droneId];

    return { account };
};

Examples of correct code for this rule:

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 for a great caching library to be used for expensive/non-deterministic selectors