Ytukyg

I am receiving this error: this.props.postBooks is not a function.

I have an action - postBooks - which I am trying to dispatch via props.

Here is my component:

"use strict"



import React from 'react'

import {Well,Panel,FormControl,FormGroup,ControlLabel,Button} from 'react-bootstrap'

import {connect} from 'react-redux'

import {bindActionCreators} from 'redux'

import {postBooks} from '../../actions/booksActions'

import {findDOMNode} from 'react-dom'



export class BooksForm extends React.Component{



    handleSubmit(){

        const book = [{

            title: findDOMNode(this.refs.title).value,

            description: findDOMNode(this.refs.description).value,

            price: findDOMNode(this.refs.price).value

        }]

        this.props.postBooks(book)

    }

    render(){



        return(

            <Well>

                <Panel>

                    <FormGroup    controlId='title'>

                        <ControlLabel> Title </ControlLabel>

                        <FormControl    

                            type='text'

                            placeholder='Enter Title'

                            ref='title' />

                    </FormGroup>



                    <FormGroup    controlId='description'>

                        <ControlLabel> Enter Description </ControlLabel>

                        <FormControl    

                            type='text'

                            placeholder='Enter Description'

                            ref='description' />

                    </FormGroup>



                    <FormGroup    controlId='price'>

                        <ControlLabel> Enter Price </ControlLabel>

                        <FormControl    

                            type='text'

                            placeholder='Enter Price'

                            ref='price' />

                    </FormGroup>

                    <Button 

                    onClick={this.handleSubmit.bind(this)}

                    bsStyle='primary'> Enter New Book </Button>



                </Panel>

            </Well>

            )

    }



}



function mapDispatchToProps(dispatch){

    return bindActionCreators({postBooks},dispatch)

}

export default connect(null,mapDispatchToProps)(BooksForm);

It seems that dispatch is not being mapped to props as expected since upon console logging props, props are empty. Any help appreciated. Thanks in advance

Edit: Added Actions

 "use strict"

// POST A BOOK

export function postBooks(book){

    return {

        type:"POST_BOOK",

        payload: book

    }

}

// DELETE A BOOK

export function deleteBooks(id){

    return {

        type:"DELETE_BOOK",

        payload: id

    }

}

//UPDATE BOOK

export function updateBooks(book){

    return {

        type:"UPDATE_BOOK",

        payload: book

    }

}



//Retrieve all books as if using API



export function getBooks(){

    return{

        type:'GET_BOOKS'

    }

}

Figured it out.

So I was exporting component up top and export default below.

Noticed webpack was giving an error 'import and export may only appear at top level'. Went ahead and removed top export and now works as expected.

Faced the same issue and I just removed the curly braces from import:

From
import {AppTest} from "./AppTest";
To
import AppTest from "./AppTest";

And that seemed to fixed the issue. Note that I had "export default" in my class already.

So I had this same issue & the problem was the same as shown in the other useful answers but I will try to explain why this happens in more details

If we define the class with a default export & a named export as shown here (based on the question):

// named export

export class BooksForm extends React.Component{      

.......

function mapDispatchToProps(dispatch){

    return bindActionCreators({postBooks},dispatch)

}

// default export

export default connect(null,mapDispatchToProps)(BooksForm); 

Then we have to be careful when importing the class to import the default export not the named export:

This imports the default export & shall work correctly with redux

import BooksForm from "./thePath"

This imports the named export & won't work with redux

import { BooksForm } from "./thePath"

If we define the two imports in the same class (which is usually done to make unit testing easier) :

Then we have to import the default export when rendering the component in order to use the redux connect() higher order function that we have exported.

Sometimes if you just depend on the editor autoimport, it will import the named export (which doesn't have the redux connect) & therefore will give that error

Bottom line

You don't have to remove any of the 2 exports, just import the default export (without braces) to use redux connect() correctly

Please try again after importing the redux store. Let me know if that worked or not.And also using refs is not recommended. https://facebook.github.io/react/docs/refs-and-the-dom.html