How to clean up import statements in modules

Question

I'm slowly learning how to break things up into components but my OCD is going mad on one particular one. I have a tab view containing lots of different cards / panels. Standard dashboard. However my import statements are growing quickly as I add new cards ( and redux actions ).

import { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
import { fetchMatches } from '../../actions/matchAction'
import MatchingCard from '../../components/MatchingCard'
import MapCard from '../../components/MapCard'
import ImageCard from '../../components/ImageCard'
import DocumentCard from '../../components/DocumentCard'

What would be a standard pattern to tidy this up? Put all those classes in one file? I was going to create an import file but I'd still be in the same scenario of adding many imports?

Any advice would be appreciated.

Answer 1

You could add an index.js to the actions and components directories so you can import more on a single line

../../actions/index.js

export * from './userAction'
export * from './matchAction'

../../components/index.js

Because of the default exports of your components, you can just export them directly like in the actions.

import MatchingCard from './MatchingCard'
import MapCard from './MapCard'
import ImageCard from './ImageCard'
import DocumentCard from './DocumentCard'

export {
  MatchingCard,
  MapCard,
  ImageCard,
  DocumentCard,
}

Then your import statement becomes

import { fetchUser, matchUser, stopMatchUser, fetchMatches } from '../../actions'
import { MatchingCard, MapCard, ImageCard, DocumentCard } from '../../components'

Answer 2

If you're using Webpack, you can use its resolve.alias, you can set up aliases for your commonly-used folders (eg. src) so you're not writing these long relative paths.

You can set it up so you either do something like:

import Component from "@/components/my-component.js"

... where @ means your src folder, or simply just:

import Component from "components/my-component.js"

And this works no matter where you are in the folder structure because its an absolute path.

// webpack.config.js

module.exports = {
  //...
  resolve: {
    alias: {
      Utilities: path.resolve(__dirname, 'src/utilities/'),
      Templates: path.resolve(__dirname, 'src/templates/')
    }
  }
};

Answer 3

You can have quite amount of imports in some of your connecting components and it's not so bad.

Joining components into one file usually bad decision, it's much better to separate them.

In my experience there is one real solution - breaking things up to even smaller components. Then on average you will have less dependencies per each file.

Also you can consider additional abstractions, like HOC (https://facebook.github.io/react/docs/higher-order-components.html) which can decrease duplication and diversity of your components in result.

Answer 4

Its not a right idea to have all the components in a single file. The whole idea of components in React is to modularize you structure.

If you don't want to have so many import statements in your file, a solution is to create a separate file where you can have all those exports and from from there.

Create a imports.js file for example

export { fetchUser, matchUser, stopMatchUser } from '../../actions/userAction'
export { fetchMatches } from '../../actions/matchAction'
export {default as MatchingCard} from '../../components/MatchingCard'
export {default as MapCard} from '../../components/MapCard'
export {default as ImageCard} from '../../components/ImageCard'
export {default as DocumentCard} from '../../components/DocumentCard'

Now in your file you can import like

import {fetchUser, matchUser, stopMatchUser , fetchMatches, MatchingCard, MapCard, ImageCard, DocumentCard } from './path/to/imports.js