mapDispatchToProps 不工作。 props 为空（错误：redux action 不是函数）

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

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

编辑：添加操作

 "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

请在导入 redux 商店后重试。让我知道这是否有效。也不建议使用 refs。 https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 2

想通了。

所以我在顶部导出组件并在下面导出默认值。

注意到 webpack 给出错误“导入和导出可能只出现在顶层”。继续并删除了顶部导出，现在可以按预期工作。

Answer 3

遇到同样的问题，我刚刚从import 中删除了花括号：

来自 import {AppTest} from "./AppTest"; 到 import AppTest from "./AppTest";

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

Answer 4

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

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

// 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()

Answer 5

我曾经遇到过同样的问题，我发现将两个文件相互导入会导致某种无限循环，并且只会中断该过程。我正在使用流静态类型检查器，当我将我的操作导入到我的组件中时，我将我的组件导入到我的操作文件中进行类型检查，并且发生了这个问题，所以我删除了将我的组件导入到我的操作文件中，并且问题解决了。