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

【问题标题】：dispatch data to firebase with react/redux使用 react/redux 将数据发送到 firebase
【发布时间】：2018-03-06 15:57:25
【问题描述】：

我正在尝试将输入字段中的值推送到 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);

【问题讨论】：

你能发布你的configureStore.js 或store.js 的样子吗？
不需要是this.props.savePost
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore) ReactDOM.render( , document.getElementById('root') ) registerServiceWorker()

标签： reactjs firebase redux firebase-authentication

【解决方案1】：

当我将 mapDispatchToProps 更改为：

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

【讨论】：

【解决方案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))
}

【讨论】：

当我这样做时，我得到“this.props.savePost 不是函数”
@ssenn 道歉，应该是this.props.dispatch.savePost(this.state)。修改答案以修复。

【解决方案3】：

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

在函数中应该是this.props.savePost(this.state.foo)

【讨论】：