Verwenden Sie Komponente Requisiten in onClick redux-thunk Versand React-Redux

Question

Der Versuch, Requisiten von <button> der Komponente im Versand einer Redux-Thunk-Funktion, die für Async-Prozess eingerichtet wurde, aber ich kann nicht ganz bekommen wie zu verwenden beide Requisiten und die Funktion (die durch react-redux connect in der mapDispatchToProps Verbindung mit der Komponente verbunden ist), aber ich kann einfach nicht herausfinden, wie man sowohl die Requisiten und die Funktion aufrufen.

function loadData(dispatch, medium) { 
    console.log(dispatch) 
    return dispatch({type: 'LOADING_COMPONENT'}) 

    return axios.get(`/professionals/${medium}`) 
    .then(res => res.json()) 
    .then(
     data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }), 
     err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err }) 
    ); 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    LogInClick :() => dispatch(loadData()), 
    } 
} 


const LoginButtons = ({props, LogInClick}) => (
    <button onClick={() => LogInClick(props.medium)} type="button">{props.buttonName}</button> 
) 


const LoginConnect = connect(null, mapDispatchToProps)(LoginButtons) 

Und ich exportieren dann das und versuchen, es zu nennen, so kann es in ähnlichem Datei übertragen wiederverwendet werden

<LoginConnect medium='suhhhh' buttonName='To log in to suhhh'/> 

Answer 1

Versuchen Sie, eine Funktion zurückkehrt, die redux-thunk wird dann rufen Sie mit Versand als ein Argument.

Sie können dann Depesche aus, dass rufen Funktion zurückgegeben:

function loadData(medium) { 
    return (dispatch) => { 
    dispatch({ type: 'LOADING_COMPONENT' }) 

    axios.get(`/professionals/${medium}`) 
     .then(res => res.json()) 
     .then(
     data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }), 
     err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err }) 
    ) 
    } 
} 

Ihre LogInClick Funktion kann dann ein Argument, das in loaddata übergeben werden können:

const mapDispatchToProps = (dispatch) => { 
    return { 
    LogInClick: (medium) => dispatch(loadData(medium)), 
    } 
} 

const LoginButtons = (props) => (
    <button onClick={() => props.LogInClick(props.medium)} type="button">{props.buttonName}</button> 
) 

ich diese Hoffnung hilft.

Answer 2

function loadData(dispatch, medium) { 
    console.log(dispatch) 
    return dispatch({type: 'LOADING_COMPONENT'}) 

    return axios.get(`/professionals/${medium}`) 
    .then(res => res.json()) 
    .then(
     data => dispatch({ type: 'LOAD_SOME_DATA_SUCCESS', data }), 
     err => dispatch({ type: 'LOAD_SOME_DATA_FAILURE', err }) 
    ); 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    LogInClick :() => dispatch(loadData()), 
    } 
} 


const LoginButtons = ({medium, buttonName, LogInClick}) => (
    <button onClick={() => LogInClick(medium)} type="button">{buttonName}</button> 
) 


const LoginConnect = connect(null, mapDispatchToProps)(LoginButtons) 

Das sollte funktionieren !! Tatsächlich verbinden verbindet mapStateToProps, mapDispatchToProps in this.props. Lesen Sie diese Dokumentation zum besseren Verständnis https://github.com/reactjs/react-redux/blob/master/docs/api.md