mapDispatchToProps not working. Props empty (error: redux action is not a function)

user_7452067 0
Viewed 10144

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'
    }
}
react-redux redux reactjs
5 Answers

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.

user_4589010

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

user_75884470

I faced the same issue once, and I found that importing two files into each other causes some kind of infinite loop and it just breaks the process. I was using flow static type checker, and while I was importing my action into my component, I imported my component into my action file for a type checking, and this issue occured, so I removed importing my component to my action file, and the problem solved.

user_39713370
Related