使用react / redux将数据发送到firebase

Question

我正在尝试将输入字段中的值推送到firebase应用程序。我已设法从中获取数据，但我似乎无法理解提交功能。我觉得我错过了一些非常简单的事情。当我尝试使用savePost时，它说这不是一个功能。

the action is:   
 export function savePost(post) {
  return dispatch => database.push(post)
}

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

class AddPost extends Component {
  constructor(props) {
    super(props);
    this.state= {
      title: '',
      body: ''
    }
    this.onChangeTitle = this.onChangeTitle.bind(this)
    this.onChangeBody = this.onChangeBody.bind(this)
    this.onSubmit = this.onSubmit.bind(this)
  }
  
  onChangeTitle(e){
    this.setState({
      title: e.target.value,
    })
  }
  onChangeBody(e){
    this.setState({
      body: e.target.value,
    })
  }
  onSubmit(e, values) {
    e.preventDefault();
    savePost(this.state)
  }
 
  render() {

    return (
      <div className="container">
       <form onSubmit={this.onSubmit.bind(this)}>
       <input value={this.state.title} onChange={this.onChangeTitle}  type="text" name="title" />
       <input value={this.state.body} onChange={this.onChangeBody} type="text" name="body"/>
       <button type="submit">Post</button>
       </form>
      </div>
    );
  }
}

const mapDispatchToProps = dispatch => ({
  savePost: dispatch(savePost())
});

export default connect(undefined, mapDispatchToProps)(AddPost);

Answer 1

当我将mapDispatchToProps更改为：

const mapDispatchToProps = () => {
  return {
    savePost: savePost
  };
};

Answer 2

在你的onSubmit(e, values)函数中，你调用的是savePost(this.state)，它实际上是调用你在文件顶部导入的函数。

以下代码将该函数添加到组件的props：

const mapDispatchToProps = dispatch => ({
    savePost: dispatch(savePost())
});

所以你需要这样做

onSubmit(e, values) {
  e.preventDefault();
  this.props.dispatch(savePost(this.state))
}

Answer 3

将其更改为

const mapDispatchToProps = dispatch => ({
    savePost: foo => dispatch(savePost(foo))
});

在功能上，它应该是this.props.savePost(this.state.foo)