Redux Thunk未调度

Question

我已经在我的应用程序上安装了Redux Thunk，到目前为止一切正常，我创建的所有先前操作都已成功从API提取数据，但是以下操作甚至都没有将操作分派给我的reducer，我想念什么？

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

我应该在nightClubsReducer的第一行上点击调试器，但是什么也没发生。据我所知，我的夜总会组件已正确连接：

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

我不知道什么会失败，因为我对其余的动作使用相同的逻辑，并且它们工作正常。

Answer 1

我认为从道具中调用动作应该可以解决您的问题

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

Answer 2

我想我找到了错误？减速器：

case 'CURRENT_NIGHTCLUB':
            debugger
            /* let nightclub = action.nightclub */
            let nightclub = action.nightclubs

            return {...state.nightclubs, nightclub}