2016-07-15 6 views
2

Hier ist, wie ich connect:Ich kann meine Handlungen als Requisiten nicht Versand (React & Redux)

function mapStateToProps(state, ownProps) { 
    return { 
    // we'll call this in our component -> this.props.listingData 
    listingData: state.locations.listingData, 

    //we'll call this in out component -> this.props.formState 
    formState: state.formStates.formState 
    }; 
} 

function mapDispatchToProps(dispatch) { 
    return { 
    actions: bindActionCreators(locationActions, formStateActions, dispatch) 
    }; 
} 

export default connect(mapStateToProps, mapDispatchToProps)(homePage); 

Hier ist die Taste, die ich verwendet:

<div onClick={this.stateToEntry} className="addButton">Add</div> 

Hier ist die Funktion laufen:

stateToEntry() { 
     this.props.actions.stateToEntry();//formStateActions.stateToEntry();//dispatch an action to update the Redux store state 
     browserHistory.push('/location');//then redirect to the add/edit/delete page using browserHistory 
    } 

ich den Fehler bekommen, dass this.props.actions.stateToEntry() keine Funktion ist. Was passiert hier eigentlich? & Wie löse ich dieses Problem?

EDIT:

ist die Protokolldaten: enter image description here

Mit anderen Worten seine Zugabe nur die {} um ihn herum. Ich habe versucht mit {formStateActions} allein und es hat nicht funktioniert, aber formStateActions hat funktioniert.

Für @ LazarevAlexandr, hier ist mein actioncreator für formStateActions:

export function stateToEntry() { 
    return { type: types.STATE_TO_ENTRY, formState: 'entry-mode'}; 
} 

export function stateToEdit() { 
    return { type: types.STATE_TO_EDIT, formState: 'edit-mode'}; 
} 

export function stateToDelete() { 
    return { type: types.STATE_TO_DELETE, formState: 'delete-mode'}; 
} 

Mein locationActions actioncreator ist ziemlich lang, so würde ich lieber nicht voll hier posten. Sie sind alle Funktionen, einige sind actioncreators, die Aktionen zurückgeben, und einige geben eine Funktion zum Abrufen von Datenlisten von einer API zurück.

+0

zeigen Sie bitte den Code, in dem Sie importieren 'locationActions' und' formStateActions' und wie Sie sie –

+0

definieren @LazarevAlexandr Wie von @krvital in seiner Antwort erwähnt, liegt das Problem bei "bindActionCreators", weil ich versucht habe, 3 Parameter zu verwenden, wenn es nur 2 sein sollte. (Nun, ich muss noch die Dokumente überprüfen). Das Problem, das ich gerade habe, ist, dass 'bindActionCreators ({action1}, dispatch)' nicht funktioniert. Jedoch 'bindActionCreators (action1, dispatch)' ohne die Klammern funktionieren, aber dies ist nur im Fall der Verwendung von 1 Aktion oder 1 Parameter. Ich möchte mehrere Aktionen verwenden. –

+0

Ich habe es verstanden, und habe eine Vermutung gemacht, dass etwas mit deinen 'actionCreators' nicht stimmt. –

Antwort

2

bindActionsCreators bekommt nur zwei Parameter, also wenn mehrere Aktionen setzt diese versuchen, übergeben möchten:

function mapDispatchToProps(dispatch) { 
    const actions = Object.assign({}, locationActions, formStateActions); 
    return { 
    actions: bindActionCreators(actions, dispatch) 
    }; 
} 
+0

Ich erhalte einen Syntaxfehler, wenn ich 'bindActionCreators ({... locationActions, ... formStateActions}, dispatch) 'verwende, aber das Analyseproblem wird behoben, wenn' bindActionCreators ({locationActions, formStateActions}, dispatch) 'verwendet wird. Ich bekomme immer noch den gleichen Fehler -> 'this.props.actions.stateToEntry()' ist keine Funktion, –

+0

Sie brauchen 'babel-preset-stage2' für Objekt Rest Spread, trotzdem können Sie dies 'bindActionCreators (Object .assign ({}, locationActions, formStateActions), dispatch) ' –

+0

Haben Sie Ihren Vorschlag mit' Object.assign() 'versucht, funktioniert das nicht. Wenn ich 'bindActionCreators (formStateActions, dispatch) 'verwende, funktioniert es. Irgendwelche anderen Vorschläge? –