reactjs - 未捕获的 TypeError : (0 , _reactRedux.bindActionCreators) 不是一个函数

Question

我正在玩 redux，我开始收到此错误，无法解决它，我希望它有任何意义，但似乎找不到任何信息..任何人都可以解释原因这可能表明？谢谢..

代码:

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

打包 json:

{
  "name": "redux-simple-starter",
  "version": "1.0.0",
  "description": "Simple starter package for Redux with React and Babel support",
  "main": "index.js",
  "repository": "git@github.com: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

这是 redux提供 bindActionCreators 函数的模块，因此导入它的正确方法是

import { bindActionCreators } from 'redux';

而不是从 react-redux 导入它。

docs中有一个包含示例的页面请访问他们的 API 文档站点。

由于 babel 转译 ES2015 模块的方式，您看到的错误看起来很奇怪，但实际上并不是 React 或 Redux 引发的。