dispatch data to firebase with react/redux

Question

I'm trying to push the values in the input field to the firebase app. I have managed to fetch data from it but i can't seem to understand the submit function. I feel like i'm missing something really simple. When i try to use savePost it says it's not a function.

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);

Can you post what your configureStore.js or store.js looks like? — Karl Taylor
– Karl Taylor, Commented Mar 6, 2018 at 16:00
const createStoreWithMiddleware = applyMiddleware(thunk)(createStore) ReactDOM.render( <Provider store={createStoreWithMiddleware(Reducers)}> <App /> </Provider>, document.getElementById('root')) registerServiceWorker() — user9399141
– user9399141, Commented Mar 6, 2018 at 16:06

user9399141 · Accepted Answer · 2018-03-06 17:43:11Z

1

It kinda worked when i changed the mapDispatchToProps to:

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

answered Mar 6, 2018 at 17:43

user9399141

Sign up to request clarification or add additional context in comments.

Comments

Karl Taylor · Accepted Answer · 2018-03-06 16:30:57Z

0

Within your onSubmit(e, values) function, you are calling savePost(this.state) which is actually calling the function you have imported at the top of the file.

The following code adds the function to the props of the component:

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

So you need to do

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

edited Mar 6, 2018 at 16:30

answered Mar 6, 2018 at 16:04

Karl Taylor

5,3394 gold badges39 silver badges65 bronze badges

2 Comments

user9399141 Over a year ago

when i do that i get "this.props.savePost is not a function"

Karl Taylor Over a year ago

@ssenn apologies, it would be this.props.dispatch.savePost(this.state). Edited answer to fix.

Stephen Burke · Accepted Answer · 2018-03-06 17:55:51Z

0

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

and in the function, it should be this.props.savePost(this.state.foo)

answered Mar 6, 2018 at 17:55

Stephen Burke

4593 silver badges15 bronze badges

Collectives™ on Stack Overflow

dispatch data to firebase with react/redux

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related