CODEWITHSUNDEEP
reactjsreduxreact-redux
bbmhmmad
bbmhmmad

Reputation: 392

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

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'
    }
}

Upvotes: 10

Views: 11030

Answers (5)

masoud
masoud

Reputation: 116

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.

Upvotes: 1

mezzie
mezzie

Reputation: 1296

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.

Upvotes: 14

Ahmed Elkoussy
Ahmed Elkoussy

Reputation: 8568

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

Upvotes: 8

bbmhmmad
bbmhmmad

Reputation: 392

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.

Upvotes: 17

Phanindra
Phanindra

Reputation: 1

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

Upvotes: 0

Related Questions