CODEWITHSUNDEEP
reactjsreact-reduxredux-thunk
Jeff Goes
Jeff Goes

Reputation: 555

Redux Thunk not firing return statement

I have seen problems like this here in Stackover flow but none of them seem to solve my problem. I am trying to dispatch an action using redux thunk but unfortunately, my thunk function is not firing the return statement.

I have tried using the redux thunk like I usually do: 

export function handleLikeThunk(id, likeType){
  console.log('thunk1')
  return (dispatch) => {
    console.log('thunk2', id);

  }
}

However the code only reaches the 'thunk1' message. It never displays 'thunk2'

I am trying to handle a like button so first I imported the redux thunk function:

import { handleLikeThunk } from '../redux/actions/posts';

I have a function that calls the thunk whenever the like button is pressed:

handleLike = (e) => {

    const { likes, id } = this.state

    if(e.target.getAttribute('name') === 'upVote'){
      this.setState((perviouState)=>({
        likes: perviouState.likes + 1
      }));

      handleLikeThunk(id, 'upVote');

    }
    if(e.target.getAttribute('name') === 'downVote' && likes > 0){
      this.setState((perviouState)=>({
        likes: perviouState.likes - 1
      }));

      handleLikeThunk(id, 'downVote');

    }

 }

And in order to do that, I connect my component to the store

const mapDispatchToProps = (dispatch) => {
  return { 
    handleLikeThunk: (id, likeType) => dispatch(handleLikeThunk(id, 
likeType)) 
   }
  }

export default connect(null, mapDispatchToProps)(Post)

Like I said, I want to be able to use the thunk function to post this info in the back-end but it never goes inside the return statament inside the thunk function.

Upvotes: 2

Views: 488

Answers (1)

dan
dan

Reputation: 1364

Looks like you're calling the raw function and not the one that you put in your mapDispatchToProps, try changing handleLikeThunk(id, 'upVote'); to this.props.handleLikeThunk(id, 'upVote');

Upvotes: 2

Related Questions