Как подключить mapDispatchToProps?

Question

[Smuzzzzzi]

Сделал вот так, но мне нужно еще передать login в connect как это сделать?

import { hideModal, showModal, login } from '../../actions';

const mapStateToProps = state => ({
  isAuthenticated: !!state.user.token
});

const mapDispatchToProps = dispatch => ({
  handleClose: () => {
    dispatch(hideModal());
  },
  showRegister: () => {
    dispatch(showModal('REGISTER', {}));
  },
  showForgot: () => {
    dispatch(showModal('FORGOT', {}));
  },
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginModal);

Если сделать так выдает ошибку

export default connect(
  mapStateToProps,
  mapDispatchToProps,
  { login }
)(LoginModal);

Answer 1

[holymotion]

import { hideModal, showModal, login } from '../../actions';

const mapStateToProps = state => ({
  isAuthenticated: !!state.user.token
});

const mapDispatchToProps = dispatch => ({
  handleClose: () => {
    dispatch(hideModal());
  },
  showRegister: () => {
    dispatch(showModal('REGISTER', {}));
  },
  showForgot: () => {
    dispatch(showModal('FORGOT', {}));
  },
  login: () => {
   dispatch(login('....'))
  }
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginModal);

Comments

[Smuzzzzzi]

Так выдает ошибку TypeError: Cannot read property 'then' of undefined
если удалить полностью mapDispatchToProps, и прописать

export default connect(
  mapStateToProps,
  {  login }
)(LoginModal); все работает отлично, но тогда не работает модальное

showRegister: () => {
    dispatch(showModal('REGISTER', {}));
  },

Вот весь компонент

import React, { PureComponent } from 'react';
import axios from "axios";
import { connect } from 'react-redux';
import Login from '../../components/Login';
import Modal from '../../components/Modal';
import { hideModal, showModal, login } from '../../actions';

class LoginModal extends PureComponent {
  constructor() {
    super();
    this.state = {
      user_details: {},
      goToMainPage: false
    };
  }
  componentDidMount() {
    if (this.props.isAuthenticated) {
      this.loadUserDetail();
    }
  }
  loadUserDetail = () => {
    axios.get("/api/users/current_user/").then(res => {
      this.setState({ user_details: res.data }, () => {
        this.checkNotificationsStatus();
        this.connectNotificationSocket(this.state.user_details.username);
      });
    });
  };
  submitSignIn = data =>
    this.props.login(data).then(() => {
      this.loadUserDetail();
      this.setState({
        goToMainPage: true
      });
      this.setState({
        goToMainPage: false
      });
    });

  render() {
    return (
      <Modal onClose={this.props.handleClose}>
        <Login
          submit={this.submitSignIn}
          showRegister={this.props.showRegister}
          showForgot={this.props.showForgot}
        />
      </Modal>
    )
  }
}

const mapStateToProps = state => ({
  isAuthenticated: !!state.user.token
});

const mapDispatchToProps = dispatch => ({
  handleClose: () => {
    dispatch(hideModal());
  },
  showRegister: () => {
    dispatch(showModal('REGISTER', {}));
  },
  showForgot: () => {
    dispatch(showModal('FORGOT', {}));
  },
  login: () => {
    dispatch(login())
  }
});

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(LoginModal);

[Роман Александрович]

Smuzzzzzi,

import {bindActionCreators} from 'redux';

const mapDispatchToProps = dispatch => ({
    back: bindActionCreators(chatActions.back, dispatch),
    getGroupUsers: bindActionCreators(chatActions.getGroupUsers, dispatch),
    deleteUser: bindActionCreators(chatActions.deleteUser, dispatch),
});

[Smuzzzzzi]

Артём Петренков, Не понял, можно подробнее пожалуйста