onClick redux-thunkディスパッチのコンポーネント小道具を使用する

Question

Asyncプロセス用に設定されたredux-thunk関数のディスパッチで、コンポーネントの<button>からの小道具を使用しようとしましたが、使用方法がわかりません両方の小道具と関数（それはmapDispatchToPropsのconnectという反応還元型コンポーネントを介してコンポーネントに接続されています）が、小道具と関数の両方を呼び出す方法はわかりません。

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) 

し、私はそれをエクスポートして、それが

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

Answer 1

ようにレンダリングファイルに再利用できるようにそれを呼び出すが、その後を呼び出しますReduxのは、サンク機能を、戻してくださいしてみてください引数としてをディスパッチします。あなたはそのからの発送を呼び出すことができます

関数を返しました：私はこのことを願っています

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

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

：

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 }) 
    ) 
    } 
} 

あなたLogInClick機能は、loaddataのに渡すことができる引数を取ることができます助けてください。

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) 

これは機能するはずです。実際にmapStateToProps、mapDispatchToPropsをthis.propsにマージして接続します。 https://github.com/reactjs/react-redux/blob/master/docs/api.md