onClick redux-thunk 디스패치에서 구성 요소 소품 사용

Question

비동기 프로세스 용으로 설정된 redux-thunk 함수의 디스패치에서 <button>의 소품을 사용하려고하는데 사용 방법을 알 수 없습니다. 양쪽 소품과 기능 (즉, 에있는 react-redux 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이-썽크 함수를 반환하려고 시도 인수로을 전달하십시오. 당신은 그에서 파견를 호출 할 수 있습니다

기능을 반환

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

다음 loadData로 전달 될 수있는 인수 걸릴 수 있습니다 LogInClick 기능 :이 희망

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

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

을 도움이됩니다.

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