mapDispatchToProps无法正常工作。道具为空（错误：redux操作不是函数）

Question

我收到此错误：this.props.postBooks不是函数。

我有一个动作-postBooks-我正尝试通过道具发送。

这是我的组件：

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

似乎调度未按预期映射到props，因为在控制台记录props时，props为空。任何帮助表示赞赏。提前致谢

编辑：添加的动作

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

Answer 1

面临同样的问题，我只是从import以下位置删除了花括号：

从 import {AppTest} from "./AppTest"; 到 import AppTest from "./AppTest";

这似乎解决了这个问题。请注意，我的班级中已经有了“导出默认值”。

Answer 2

弄清楚了。

所以我先导出组件，然后再导出默认组件。

注意到webpack出现错误“导入和导出可能只出现在顶层”。继续前进并删除了主要出口商品，现在可以按预期运行。

Answer 3

所以我遇到了同样的问题，问题与其他有用的答案中显示的相同，但我会尝试更详细地解释为什么会发生这种情况

如果我们使用默认导出和命名导出定义类，如下所示（基于问题）：

// named export
export class BooksForm extends React.Component{      
.......
function mapDispatchToProps(dispatch){
    return bindActionCreators({postBooks},dispatch)
}
// default export
export default connect(null,mapDispatchToProps)(BooksForm); 

那么我们在导入类时要小心，导入默认导出而不是命名导出：

这将导入默认导出并应与 redux 一起正常工作

import BooksForm from "./thePath"

这会导入命名的导出并且不适用于 redux

import { BooksForm } from "./thePath"

如果我们在同一个类中定义两个导入（通常这样做是为了使单元测试更容易）：

然后我们必须在渲染组件时导入默认导出，以便使用我们导出的 redux connect() 高阶函数。

有时，如果您仅依赖编辑器自动导入，它将导入命名导出（没有 redux 连接），因此会出现该错误

底线

您不必删除 2 个导出中的任何一个，只需导入默认导出（不带大括号）即可正确使用 redux connect()