在onClick redux-thunk分派React-Redux中使用組件道具

Question

嘗試使用組件的<button>的道具在為異步過程設置的redux-thunk函數的分派中使用，但我不太了解如何同時使用道具和函數（即通過組件連接到組件react-redux在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

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

Answer 2

嘗試返回一個函數， redux-thunk將使用dispatch作為參數進行調用。

然后，您可以從返回的函數中調用dispatch：

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 ：

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

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

我希望這有幫助。