Уменьшение ада импорта действий Redux с помощью пространств имен в ES6

Импорт большого количества действий может быть беспорядочным в большом приложении Redux. Вот несколько советов, как сделать это более аккуратно и организованно.

Boilerplate

Перечислите все необходимые действия как именованный импорт. Этот метод может быть очень сложным в обслуживании.

import {
  sendMessages,
  deleteMessage,
  markAsRead,
} from './messageActions'
import {
  openChat,
  closeChat,
} from './chatActions'
// component code comes here
const mapDispatchToProps = dispatch => bindActionCreators(
  {
    sendMessages,
    deleteMessage,
    markAsRead,
    openChat,
    closeChat,
  },
  dispatch,
)
// connect(...)

Чтобы узнать, как работает connect(), см.:

Импортировать все действия как пространства имен

Нам не нужно перечислять все действия, поэтому эта версия намного короче. Вновь созданные действия неявно вводятся в свойства компонента.

import * as messageActions from './messageActions'
import * as chatActions from './chatActions'
// component code comes here
const mapDispatchToProps = dispatch => bindActionCreators(
  {...messageActions, ...chatActions},
  dispatch,
)
// connect(...)

или просто:

import * as messageActions from './messageActions'
import * as chatActions from './chatActions'
// component code comes here
const mapDispatchToProps = {...messageActions, ...chatActions}
// connect(...)

Удачного кодирования!