Reagieren mit Redux - Aktion kann nicht an Eltern gebunden werden

Question

Ich bin neu im Redux-Muster Ich habe Probleme beim Verknüpfen einer Aktion in einer separaten JS-Datei mit der übergeordneten Komponente. Hier ist die Komponente:

import React, {Component} from 'react'; 
import {bindActionCreators} from 'redux'; 
import {connect} from 'react-redux'; 
import playSample from './sampleActions/clickToPlay'; 

class SamplesInnerLrg extends Component { 
    render() { 
     return <div> 
    { 
    this.props.samples.map((sample) => { 
     return (
       <div key={sample.id} className="sample-comp-lge"> 
        <div className="sample-comp-lge-header"> 
         <span className="sample-comp-lge-Name">{sample.sampleName}</span> 
         <span className="sample-comp-lge-id">{sample.sampleFamily}</span> 
        </div> 
        <div className="sample-comp-lge-audio" ref={sample.id} onClick={() => this.bind.playSample(sample)}> 
         <audio preload="auto" id="myAudio"> 
           <source src={sample.soundSource} type="audio/wav" /> 
         </audio> 
        </div> 
        <div className="sample-comp-lge-owner">{sample.uploader}</div> 
       </div> 
      ) 
     }) 
    } 
    </div> 
    } 
} 

function mapStateToProps(state) { 
    return { 
     samples:state.samples 
    }; 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({playSample:playSample},dispatch) 
} 

export default connect(mapStateToProps,matchDispatchToProps)(SamplesInnerLrg); 

Insbesondere Ich versuche, eine onClick Aktion auf dieser Linie zu haben, die eine Funktion in einer importierten Datei aufruft (clickToPlay.js):

<div className="sample-comp-lge-audio" ref={sample.id} onClick={() => this.bind.playSample(sample)}> 

Die ClickToPlay Datei aussieht etwa so:

import $ from 'jquery'; 

export const playSample = (sample) => { 
    console.log(sample); 

     return { 
      type:"Play_Sample_clicked", 
      payload:sample 
     } 
    }; 

der Fehler i auf Klick bekommen habe, ist nicht Eigentum ‚playSample‘ undefinierter Kann lesen. Ich schätze, ich habe die Aktion korrekt an die Komponente gebunden, aber ich kann nicht sagen warum?

EDIT:

Hier ist meine index.js Datei wie gewünscht:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
import App from './App'; 
import {Provider} from 'react-redux'; 
import { createStore,compose } from 'redux'; 
import allReducers from './reducers'; 

const store = createStore(allReducers,compose(
    window.devToolsExtension ? window.devToolsExtension() : f => f 
    )); 

ReactDOM.render(
    <Provider store={store}> 
     <App /> 
    </Provider> 
    , 
    document.getElementById('root') 
); 

Answer 1

Sie sind nicht 'playSample' als Standard-Export exportieren, haben Sie zwei Möglichkeiten, dies reslove:

Sie tun können:

import { playSample } from './sampleActions/clickToPlay';

oder

können Sie export const playSample zu const playSample ändern Dann fügen Sie export default playSample am Ende der Datei hinzu.

Noch ein Hinweis ich über diese Linie erwähnen wollen:

return bindActionCreators({playSample:playSample},dispatch) 

Ich sehe nicht, warum Sie {playSample:playSample} tun es nur zu playSample ändern. Mit ES6 können Sie den Schlüssel löschen, wenn er dem Wert entspricht. Dies wird Objekt Literal-Eigenschaftswert Kurzschrift genannt.