How to clear import statements in modules

Question

I am slowly learning how to break things down into components, but my OCD is going crazy on one thing. I have a tab containing many different maps / panels. Standard dashboard. However, my import statements grow rapidly when I add new maps (and reduction 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 will be the standard template to remove this? Put all these classes in one file? I was going to create an import file, but would it still be in the same scenario of adding a large amount of import?

Any advice would be appreciated.

Answer 1

, .

, .

- . .

, HOC (https://facebook.imtqy.com/react/docs/higher-order-components.html), .

Answer 2

index.js ,

../..//index.js

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

../..//index.js

- , .

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

export {
  MatchingCard,
  MapCard,
  ImageCard,
  DocumentCard,
}

import

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

Answer 3

, , index.js .

index.js

export * from './MatchingCard';
export * from './MapCard';
export * from './ImageCard';
export * from './DocumentCard';

.

import { MatchingCard, MapCard, ImageCard, DocumentCard} from '../../components'

Answer 4

. React - .

, , , , .

imports.js,

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'

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

Answer 5

, . , , .

const formFields = [
  { id: 'name', type: 'string' },
  { id: 'size', type: 'integer' },
  { id: 'isPublic', type: 'boolean' }
]

type ( , ..) import . import .

, alias webpack . .

Answer 6

If you use Webpack, you can use it , you can configure aliases for your frequently used folders (e.g. src) so that you do not write these long relative paths. resolve.alias

You can configure it so that you do something like:

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

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

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

And it works no matter where you are in the folder structure, because it is an absolute path.

// webpack.config.js

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