Question

将组件连接到redux store后，我无法调用容器中的操作

我的容器：

import React, { Component } from 'react';
import * as actions from '../actions';
import { connect } from 'react-redux';

class CommentBox extends Component {
    constructor(props) {
        super(props);

        this.state = { comment: '' };
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ comment: event.target.value });
    }

    handleSubmit(event) {
        event.preventDefault();

        this.props.actions.saveComment(this.state.comment);
        this.setState({ comment: '' });
    }

    render() {
        return (
            <form
                onSubmit={this.handleSubmit}
                className="comment-box">
                <textarea
                    value={this.state.comment}
                    onChange={this.handleChange.bind(this)}/>
                <button action="submit">Submit Comment</button>
            </form>
        );
    }
}

const Container = connect(null, actions)(CommentBox);

export default Container;

我的动作创作者

import React, { Component } from 'react';
import CommentBox from './comment_box';
import CommentList from './comment_list';

export default class App extends Component {
  render() {
    return (
      <div>
          <CommentBox />
          <CommentList />
      </div>
    );
  }
}

我确定我有正确的导入路径。当我试图执行handleSubmit（）时，控制台说

无法读取未定义的属性'saveComment'

所以我在handleSubmit中检查过道具，它是一个像对象一样的对象：

default: function () ...

我需要映射任何动作。我怎么解决呢？谢谢

Editted：这是我的行为

import SAVE_COMMENT from './types';

export default function saveComment(comment) {
    return {
        type: SAVE_COMMENT,
        payload: comment
    };
};

我还发现我将动作创建者导出为默认值。所以当我用import * as action导入它时，我有一个看起来像

的对象

{ default: function saveComment() }

它使mapDispatchToProps将默认属性映射到容器的道具。要解决这个问题，我只需在导出saveComment时删除default即可。谢谢大家

Answer 1

这不是在组件中使用操作的正确方法。您必须确保操作包含在调度方法中。在您的情况下，我将创建另一个函数mapDispatchToProps并使用bindActionCreators。请参阅下面的代码：

import React, { Component } from 'react';
import * as actions from '../actions';
import { bindActionCreators } from 'redux'; 
import { connect } from 'react-redux';

class CommentBox extends Component {
    constructor(props) {
        super(props);

        this.state = { comment: '' };
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleChange(event) {
        this.setState({ comment: event.target.value });
    }

    handleSubmit(event) {
        event.preventDefault();

        this.props.actions.saveComment(this.state.comment);
        this.setState({ comment: '' });
    }

    render() {
        return (
            <form
                onSubmit={this.handleSubmit}
                className="comment-box">
                <textarea
                    value={this.state.comment}
                    onChange={this.handleChange.bind(this)}/>
                <button action="submit">Submit Comment</button>
            </form>
        );
    }
}

// use bindActionCreators here
const mapDispatchToProps = dispatch => ({
  actions: bindActionCreators(actions, dispatch),
})

const Container = connect(null, mapDispatchToProps)(CommentBox);

export default Container;

Answer 2

由于您要导入操作（如import * as actions from '../actions';所述），您应该可以通过actions.saveComment(this.state.comment);

中的handleSubmit()来访问您的操作

连接react-redux和mapDispatchToProps后无法调用操作

2 个答案: