Redux Aktion nicht vorhanden

Question

Ich habe korrekt nach doc Redux Boilerplate eingerichtet. Ich habe einen Ordner mit verschiedenen Action-Dateien, die Aktionen enthält. In diesem Ordner habe ich eine index.js erstellt, wo ich alle diese Dateien exportieren. Ich importiere es als benannten Export. Wenn ich die Funktion der Konsole selbst logge, ist sie da, aber wenn ich mich abmelde, ist this.props nicht vorhanden. Ich habe versucht, die Funktion loggen außerhalb der Klasse undefined.

Wenn ich die Aktion direkt aus der Datei importieren, ist es in es definiert.

Aktionen/formActions.js

export const formInput = (key, val) => (
    { 
     type: FORM_INPUT, 
     payload: { key, val } 
    } 
); 

Aktionen/index.js

export * from './formActions'; 

FormComp.js

import { formInput } from './actions'; // <-- this.props.formInput = undefined 

o r

import { formInput } from './actions/formActions'; // <-- this.props.formInput = func 

verbinden:

class InputField extends Component { ... } 

const FormComp = connect(({ forms }) => ({ forms }), { formInput })(InputField); 

export { FormComp }; 

edit1: Wenn ich in componentWillMount()console.log(formInput) //without this.props sein dort.

edit2 (Lösung?): Ich konnte Aktionen mit bindActionCreators zu Requisiten abzubilden. Wie auch immer, ich verstehe nicht, warum ich bindActionCreators verwenden muss und warum ich nicht einfach verbinden kann, wie es mit Aktionen als zweiter Parameter ist.

const FormComp = connect(
    ({ forms }) => ({ forms }), 
    dispatch => bindActionCreators({ formInput }, dispatch) 
)(InputField); 

Answer 1

Sie benötigen eine Funktion zurück, die dispatch und getState als Parameter hat.

export const formInput = (key, val) => (dispatch, getState) => { 
    // maybe additional stuff 
    dispatch({ 
     type: FORM_INPUT, 
     payload: { key, val } 
    }); 
}; 

Siehe Titel Aktion Creators aus den Dokumenten: https://redux.js.org/docs/basics/Actions.html

Answer 2

Der Grund this.props.formInput nicht definiert, aber formInput definiert ist, weil die Redux ist eine Verbindung nicht richtig die Funktion formInput gegen die variable Einstellung (Eigenschaft) formInput innerhalb der Komponente Requisiten.

1. formInput ist die Funktion, die Sie importieren,,
2. this.props.formInput die Eigenschaft, die „Punkt“ sollten Sie importieren, um die Funktion.

Try (ich habe für Klarheit abgetrennt)

function mapStateToProps(state) { 
    return { 
     forms: state.forms 
    } 
    } 
function mapDispatchToProps(dispatch) { 
    return { 
    formInput: (key, val) => dispatch(formInput(key val)) 
    }; 
} 

export connect(
    mapStateToProps, 
    mapDispatchToProps 
)(InputField); 

dann überall in Ihrem Code aufrufen Sie

this.props.formInput(key, val); 

Dies wird die Aktion über die Requisiten nennen, und deshalb versenden wird. richtig