CODEWITHSUNDEEP
reactjsreduxreact-reduxredux-thunkreact-props
KellysOnTop23
KellysOnTop23

Reputation: 1435

Use component props in onClick redux-thunk dispatch React-Redux

Trying to use props from <button> of component in the dispatch of a redux-thunk function that has been set up for Async process but I can't quite get how to use both props and the function (that's being connected to the component through react-redux connect in the mapDispatchToProps) but I just can't figure out how to call both the props and the function.

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)

And Then I export that and try to call it so it can be reused in the render file like 

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

Upvotes: 0

Views: 1468

Answers (2)

Steve Holgado
Steve Holgado

Reputation: 12071

Try returning a function, which redux-thunk will then call with dispatch as an argument.

You can then call dispatch from that returned function:

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

Your LogInClick function can then take an argument which can be passed into loadData:

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

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

I hope this helps.

Upvotes: 0

simbathesailor
simbathesailor

Reputation: 3687

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)

This should work !! actually connect merges mapStateToProps, mapDispatchToProps into this.props. Read this documenation for better understanding https://github.com/reactjs/react-redux/blob/master/docs/api.md

Upvotes: 1

Related Questions