mapDispatchToPropsが機能しません。小道具の空

Question

私はこのエラーを受け取ります：this.props.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のストアをインポートした後、もう一度お試しください。それがうまくいくかどうか私に教えてください。また、refを使うことはお勧めしません。 https://facebook.github.io/react/docs/refs-and-the-dom.html

Answer 2

私はコンポーネントを上にエクスポートしていて、下にデフォルトをエクスポートしていました。

「インポートとエクスポートはトップレベルにしか表示されない可能性があります」というエラーが発生しました。先行してトップのエクスポートを削除して、期待どおりに動作するようになりました。