Redux Thunk not dispatching

Question

I have installed Redux Thunk on my application and it's been working fine so far, all of the previous actions I've created are pulling out data from APIs successfully, however the following action is not even dispatching actions to my reducer, any idea what am I missing?

// my action
export const fetchClub = id => {
debugger
return (dispatch) => {
    if (id){
    dispatch ({type: 'START_PULLING_NIGHTCLUB'});
    let targetUrl = `http://localhost:3001/nightclub`
    fetch(targetUrl)
    .then(res => {
        debugger
        return res.json()
      })
    .then(nightclub => dispatch({type: 'CURRENT_NIGHTCLUB', nightclubs: nightclub.result}))
    .catch(error => {
        console.log(error)
    })  

}}}

//my reducer

    import {combineReducers} from "redux"



const rootReducer = combineReducers({
    nightclubs: nightClubsReducer,
    user: userReducer
})

export default rootReducer

function nightClubsReducer(state = {}, action) {
    debugger
    switch (action.type){
        case 'ADD_NIGHTCLUBS':
            debugger
            let nightclubs = action.nightclubs
            // filering the results just to show nightclubs rather than hotels
            nightclubs = nightclubs.filter( function (nightclub){
                return !nightclub.types.includes("lodging")
            })
          return {...state.nightclubs, nightclubs}
        case 'CURRENT_NIGHTCLUB':
            debugger
            let nightclub = action.nightclub
            return {...state.nightclubs, nightclub}    
    default:
        return state
}}

function userReducer(state = {user: {logged_in: false}}, action){
    let current_user = {}
    switch (action.type){
        case 'ADD_USER_LOCATION':
            let coords = action.location.coords
            return {...state.user, coords}
        case 'CREATE_USER':    
            current_user = action.user
            state.logged_in = true
            return {...state.user, current_user}
        case  'ADD_LOGGED_IN_USER':
            current_user = action.user
            if(state.user){
            state.user.logged_in = action.user.logged_in} 
            return {...state.user, current_user}
        default:
            return state
    }
}

I should be hitting the debugger on the first line of my nightClubsReducer however nothing happens. My Nightclub component is connected properly as far as I'm aware:

    import React, { Component } from 'react';
import Maya from '../assets/Mayaclubbio.jpg'
import '../NightClubPage.css'
import { connect } from 'react-redux';
import { fetchClub } from '../actions/NightClubs';

class NightClub extends Component {

    constructor(props) {
        super(props);
        this.id = props.match.params.id
    }

    componentDidMount() {
        fetchClub(this.id)
    }

    render() {
        debugger
        return (
            <React.Fragment>
               //HTML code
            </React.Fragment>
        )
    }
}

const mapStateToProps = (state) => {
    debugger
    return {
      nightclub: state.nightclubs.nightclub,
      user: state.user
    }
  }

export default connect(mapStateToProps, { fetchClub })(NightClub);

I have no clue what could be failing as I'm using the same logic for the rest of my actions and they are working just fine.

Answer 1

I think calling the action from props should fix your issue

componentDidMount() {
 this.props.fetchClub(this.id);
}