Как лучше импортировать компоненты в React?

Question

[Айдар Хаятов]

В проекте получается много shared компонентов (кнопки, переключатели, итд). И в каждом компоненте приходится их отдельно импортировать.
Есть вариант создать модуль в котором заимпортирвоать все эти компоненты и вернуть

export default { 
  Component1,
  Component2,
  Component3
}

Соответственно - импортировать только его. и из него уже брать нужные компоненты.
Нормальный ли это подход в мире React - и есть ли минусы?

Спасибо!

Answer 1

[Андрей Hecc]

Мы используем вот такой подход. Покажу на примере action из redux, но его можно использовать и с компонентами.
Создаеться файл index.js в директории с shared компонентами. Из него экспортируются все именные экспорты из файлов в этой папке вот таким образом:

Файл index.js:

export * from './auth';
export * from './user';
export * from './interfaces';
export * from './search';
export * from './catalog';
export * from './classifier';

Файл auth.js:

export const getUserToken = ( login, password ) => (dispatch, getState) => {...}
export const registerUser = ( newUserData ) => ( dispatch, getState ) => {...}

Таким образом, потом в любом месте, где нам необходимо что-то из этих файлов получить -- мы имеем одну точку входа через которую можем получить переменные сразу из нескольких файлов:

import { getUserToken, doSmsng, doSmsngElse } from '../../../_actions';

Comments

[Айдар Хаятов]

Спасибо!