Как оптимизировать mapDispatchToProps?

Question

[Максим Корольский]

Что бы в каждом компоненте не городить вот такое

const mapDispatchToProps = (dispatch) => {
	return {
		saveUser: bindActionCreators(saveUserAction, dispatch),
		getUser: bindActionCreators(getUserAction, dispatch),
		getUser: bindActionCreators(getUserAction, dispatch),
		getUser: bindActionCreators(getUserAction, dispatch),
		getUser: bindActionCreators(getUserAction, dispatch),
		getUser: bindActionCreators(getUserAction, dispatch),
                и т.д.
	};
};

Пока на ум пришло только все это в action еще делать, и потом только эту функцию из action передавать...

Answer 1

[Максим]

Есть хороший вариант: подключить actions через *

import * as UserActions from '../actions/UserActions'
...
const mapDispatchToProps = (dispatch) => {
  return {
    userActions: bindActionCreators(UserActions, dispatch)
  }
}

В таком случае, все действия юзера (а именно, все экспортируемые функции из файла UserActions) будут доступны из this.props.userActions (например, this.props.userActions.saveUser)

Так же, можно не писать return, если вы возвращаете объект (как раз наш случай)

const mapDispatchToProps = (dispatch) => ({
  userActions: bindActionCreators(UserActions, dispatch)
})

Обратите внимание на круглые скобки.

Comments

[Максим Корольский]

Максим спасибо хорошее решение

[Максим]

Максим Корольский: пожалуйста, если все ок - отмечайте как решение.

[copal]

Максим: а можете объяснить что именно делает метод bindActionCreators?

[Максим]

copal: оборачивает каждую функцию в dispatch(функция) - https://github.com/reactjs/redux/blob/64a8c66b4541... А когда мы экспортируем через *, то на выходе имеем объект с функциями (https://monosnap.com/file/cQO4YJiO7vajL1cDjq7AlZuf..., в таком случае bindActionCreators оборачивает каждую функцию в dispatch(функция) https://github.com/reactjs/redux/blob/64a8c66b4541...

[Максим]

copal: у monosnap в ссылке скобочку надо убрать, правильно так https://monosnap.com/file/cQO4YJiO7vajL1cDjq7AlZuf...

[copal]

Максим: а не легче thunk присоединить и слать сразу dispatch(action())? Или это не тоже само?

[Максим]

copal: если речь про redux-thunk, то это не тоже самое. Redux-thunk (middleware) проверяет, если на вход пришла функция - то она оборачивается и в аргументах появляются dispatch и getState, а если пришел объект (то есть вызван обычный dispatch -> {type: 'ACTION_NAME' }) прокидывает дальше.

[copal]

Максим: тогда получается что код автора

const mapDispatchToProps = (dispatch) => {
  return {
    userActions: bindActionCreators(UserActions, dispatch)
  }
}

абсолютно равен ?

const mapDispatchToProps = (dispatch) => {
  return {
    userActions: (a, b) => dispatch(UserActions(a, b))
  }
}

Зачем в таком случаи он вообще нужен?

[copal]

Максим: хотя разница наверное только в том что bindActionCreators может, как Вы уже сказали принять и обработать объект-модуль с экшен креатома. Правильно?

[Максим]

copal: да, верно.

[copal]

Максим: спасибо за разъяснения.