在 onClick redux-thunk dispatch React-Redux 中使用组件道具答案

【问题标题】：Use component props in onClick redux-thunk dispatch React-Redux在 onClick redux-thunk dispatch React-Redux 中使用组件道具
【发布时间】：2018-05-19 15:11:49
【问题描述】：

尝试使用组件的 <button> 中的道具来调度已为异步进程设置的 redux-thunk 函数，但我无法完全了解如何同时使用道具和函数（正在连接到通过 react-redux connect mapDispatchToProps 中的组件，但我就是不知道如何同时调用道具和函数。

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'/>

【问题讨论】：

我不确定这是否会导致您的问题，但似乎您总是在您的 loadData() 函数中返回 dispatch() 的结果，这意味着 axios 调用永远不会被调用。

标签： reactjs redux react-redux redux-thunk react-props

【解决方案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)

这应该工作！实际上 connect 将 mapStateToProps、mapDispatchToProps 合并到 this.props 中。阅读此文档以更好地理解 https://github.com/reactjs/react-redux/blob/master/docs/api.md

【讨论】：

【解决方案2】：

尝试返回一个函数，然后 redux-thunk 将使用 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>
)

我希望这会有所帮助。

【讨论】：