Question

所以我似乎无法想出这个。我正在尝试做flash消息，这里在登录的第一个例子中我只从动作语句中执行了这个导入addFlashMessages，我没有在连接中使用mapDispatchToprops，我使用'{actions}'，这很有用。

但是在第二个例子中我必须使用mapDispatchToProps而不是'{actions}'，我不知道如何使这项工作，我用谷歌搜索并尝试了几种不同的方法，但没有成功

import React from 'react';
import { Field, reduxForm } from 'redux-form';
import { Link } from 'react-router-dom';
import { connect } from 'react-redux';
import { loginUser, clearAlert } from '../../actions/auth';
import { addFlashMessage } from '../../actions/flashMessages';    


class Login extends React.Component {

  componentWillUnmount() {
    return this.props.clearAlert();
  }

  submitForm = values => {
    this.props.addFlashMessage({
      type: 'info',
      message: 'You logged in successfully'
    })
    this.props.loginUser(values);
  }

  renderAlert() {
    if(this.props.errorMessage) {
      return (
        <div className="alert">
          <strong>Oops!</strong> {this.props.errorMessage}
        </div>
      )
    }
  }

  render() {
    const { handleSubmit } = this.props;

    return (

      <form className="box-layout" onSubmit={handleSubmit(this.submitForm.bind(this))}>
      /////////////

      </form>

    );
  }
}


function mapStateToProps(state) {
  return { errorMessage: state.auth.error };
}

Login = connect(mapStateToProps, { loginUser, clearAlert, addFlashMessage })(Login);

export default reduxForm({
  form: 'login-form'
})(Login)

所以这里我不知道如何在点击onSubmit或onRemove时成功连接addFlashMessage来改变状态

import React from 'react';
import { connect } from 'react-redux';
import ArticleForm from './ArticleForm';
import { startEditArticle, startRemoveArticle } from '../../actions/article';
import { addFlashMessage } from '../../actions/flashMessages';

export class EditArticle extends React.Component {

  onSubmit = (article) => {
    this.props.addFlashMessage({
      type: 'success',
      message: 'Article updated successfully'
    })
    this.props.startEditArticle(this.props.article._id, article)
  }
  onRemove = () => {
   this.props.addFlashMessage({
     type: 'success',
     message: 'Article deleted!'
   })
   this.props.startRemoveArticle( this.props.article._id );
   this.props.history.push('/');
 };

  render() {
    return (
      <div className="content-container">
          <h1>Edit article</h1>
          <ArticleForm
            {...this.props}
            article={this.props.article}
            onSubmit={this.onSubmit}
            onRemove={this.onRemove}
          />
      </div>
    )
  }
}

const mapStateToProps = (state, props) => ({
  article: state.articles.find((article) => article._id === props.match.params.id)
})

const mapDispatchToProps = (dispatch, props) => ({
  startEditArticle: (_id, article) => dispatch(startEditArticle(_id, article)),
  startRemoveArticle: (_id) => dispatch(startRemoveArticle({_id}))
})

export default connect(mapStateToProps, mapDispatchToProps)(EditArticle)

Answer 1

我想你需要从redux导入bindActionCreators，然后把所有动作都放在那里

import {bindActionCreators} from 'redux';

function matchDispatchToProps(dispatch) {
    return bindActionCreators({ addFlashMessage, startEditArticle }, dispatch)
}

<强>更新

function matchDispatchToProps(dispatch, props) {
    return bindActionCreators({ addFlashMessage, startEditArticle: (_id, article) => dispatch(startEditArticle(_id, article)), startRemoveArticle: (_id) => dispatch(startRemoveArticle({_id})) }, dispatch, props)
}

Answer 2

如何将addFlashMessage: props.addFlashMessage插入matchDispatchToProps。

redux连接调度操作

2 个答案: