Uncaught TypeError: (0 , _reactRedux.bindActionCreators) is not a functin

Question

I'm playing around with redux, I'm and started getting this error, can't resolve it, I was hoping it has any meaning, but can't seem to find any information.. Can anyone explain the reason this may show? Thanks..

Code:

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'react-redux';
import  { searchForBeers } from '../../actions/index';


class SearchBar extends Component {

  constructor(props) {
    super(props);

    this.state = { term: ''}

    this.onFieldChange = this.onFieldChange.bind(this);
    this.onClickSearch = this.onClickSearch.bind(this);
  }

  onFieldChange(event) {
    this.setState({ term: event.target.value })

    console.log(this.state)
  }

  onClickSearch() {
    console.log(this.state)

    this.props.searchForBeers(this.state.term)
  }

  render() {
    return (
        <div className="col-lg-6" style={{top:20 , width:'70%'}}>
           <div className="input-group">
         <span className="input-group-btn">
           <button onClick={this.onClickSearch} className="btn btn-secondary" type="button">Go!</button>
         </span>
         <input type="text" className="form-control" placeholder="Search for..." onChange={this.onFieldChange} />
       </div>
       </div>
    )
  }

}

//Container functions

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ searchForBeers }, dispatch);
}

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

Package json:

{
  "name": "redux-simple-starter",
  "version": "1.0.0",
  "description": "Simple starter package for Redux with React and Babel support",
  "main": "index.js",
  "repository": "[email protected]:StephenGrider/ReduxSimpleStarter.git",
  "scripts": {
    "start": "node ./node_modules/webpack-dev-server/bin/webpack-dev-server.js"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-core": "^6.2.1",
    "babel-loader": "^6.2.0",
    "babel-preset-es2015": "^6.1.18",
    "babel-preset-react": "^6.1.18",
    "chai": "^3.5.0",
    "chai-jquery": "^2.0.0",
    "css-loader": "^0.25.0",
    "jquery": "^2.2.1",
    "jsdom": "^8.1.0",
    "mocha": "^2.4.5",
    "node-sass": "^3.10.0",
    "react-addons-test-utils": "^0.14.7",
    "sass-loader": "^4.0.2",
    "style-loader": "^0.13.1",
    "webpack": "^1.13.2",
    "webpack-dev-server": "^1.14.0"
  },
  "dependencies": {
    "axios": "^0.13.1",
    "babel-preset-stage-1": "^6.1.18",
    "lodash": "^3.10.1",
    "material-ui": "^0.15.4",
    "raw-loader": "^0.5.1",
    "react": "^15.3.2",
    "react-dom": "^15.3.2",
    "react-redux": "^4.4.5",
    "react-router": "^2.0.1",
    "redux": "^3.5.2",
    "redux-promise": "^0.5.0",
    "redux-simple-promise": "^2.0.2"
  }
}

Answer 1

It's the redux module that provides the bindActionCreators function so the correct way to import it would be

import { bindActionCreators } from 'redux';

instead of importing it from react-redux.

There is a page with examples in the docs over at their API documentation site.

The error you're seeing simply looks funky because of the way babel transpiles ES2015 modules but it's not actually React or Redux that's throwing it.