如何解决道具和同名模块导入之间的eslint冲突？

Question

I'm using react with react-redux and eslint . In my container, I import an action that will be bound to the component's props in mapDispatchToProps like so:

// simplified for brevity
import { getGames } from '../actions/game';

const mapDispatchToProps = dispatch => ({
  getGames: () => dispatch(getGames())
});

class App extend React.Component {
  // class members
}

export default App connect(mapDispatchToProps)(App);

I call getGames in componentDidMount:

  componentDidMount () {
    const { getGames } = this.props;
    getGames().then(json => console.log(json));
  }

Eslint insists that I use object destructuring to pull values from this.props in componentDidMount, which is fine.

The problem is, eslint also complains that getGames is already declared in the outer scope (the import statement) when I do use object destructuring.

I'd like to appese eslint in both cases, but can't think of how I'd use object destructing in both the import and the this.props destructure without causing a naming conflict.

Any ideas are much appreciated!

Answer 1

// simplified for brevity
import { getGames } from '../actions/game';

you can use alias for it.

import { getGames as getGames1 } from '../actions/game';

and use alias instead.