Question

我不明白为什么动作创建者被调用但被卡在中间的某个地方。我的组件

import React, { Component } from 'react';
import { connect } from 'react-redux';

import {getSpots} from 'Actions';
import SpotsList from 'SpotsList'
import MapContainer from 'MapContainer';

import Alert from 'Alert';

class IndexPage extends Component{

    componentWillMount() {
        console.log('cwm indexpage', this.props.location.query);
        getSpots('london', 1, 1)
    }


    render() {      
        return (            
            <div className='index-page row'>
                <Alert />               
                <div className='col-sm-5 no-padding'>
                    <MapContainer />
                </div>
                <div className='col-sm-7 no-padding' id='right'>
                    <SpotsList/>
                </div>
            </div>
        );  
    }
}

export default connect(null, {getSpots})(IndexPage);

所有动作创作者：

import axios from 'axios';
import {browserHistory} from 'react-router';

const ROOT_URL = '/api/spots/';

//get list of polls
export function getSpots(location='London', offset=0, sort=0){  
    console.log('getSpots1',location, offset, sort)
    return function(dispatch){                  
        console.log('getSpots2',location, offset, sort)
        dispatch(removeErroMessage());                      
        dispatch(changeLoadingStatus());        
        axios.get(ROOT_URL+'?location='+location+'&offset='+offset+'&sort='+sort+'&category_filter=bars')
            .then((response)=>{     
            console.log('got response')     
                dispatch({
                    type: 'GET_SPOTS',
                    payload: response.data.businesses
                });
                dispatch({
                    type: 'SET_TERM',
                    payload: location
                });             
                dispatch(setMapCenter({
                        lat: response.data.latitude,
                        lng: response.data.longitude
                    }));        
                dispatch({
                        type: 'SET_SPOTS_COUNT',
                        payload: response.data.total
                    });     
                dispatch(changeLoadingStatus());
            })
            .catch((error)=>{   
                var {status} = error.response;

                if(status==400){                    
                    dispatch(setErrorMessage('Sorry! No results were found for the requested search. Try searching with some different keywords')); 
                }else{
                    dispatch(setErrorMessage('Something went wrong. We are working on it.'));   
                }                               
            })
    }   
}

export function selectSpot(id){ 
    return {
        type: 'SELECT_SPOT',
        payload: id
    };
}

export function setMapCenter(coords){
    return {
        type: 'SET_MAP_CENTER',
        payload: coords
    };  
}

export function setSort(sort){
    return {
        type: 'SET_SORT',
        payload: sort
    }
}


export function changeLoadingStatus(){  
    console.log('changeLoadingStatus')
    return {
        type: 'CHANGE_LOADING_STATUS'
    }
}


export function setErrorMessage(error){
    return {
        type: 'SET_ERROR',
        payload: error
    }
}

export function removeErroMessage(){
    console.log('removeErroMessage')
    return {
        type: 'REMOVE_ERROR'
    }
}

输出结果为：

cwm indexpage Object {  }  bundle.js:29712:5
getSpots1 london 1 1

因此调用了getSpots动作创建者，但没有向服务器发出请求。我的方法有什么问题？

Answer 1

您忘记添加调度方法以触发操作。

this.props.dispatch(getSpots('london', 1, 1));

Answer 2

我认为您的连接使用方式有误。它什么都不做。相反，你可以像我一样绑定你的动作并使用你的thunk动作。

import React, { Component } from 'react';
import { bindActionCreators } from 'redux'
import { connect } from 'react-redux';

//import {getSpots} from 'Actions';
import * as myActions from 'Actions'
import SpotsList from 'SpotsList'
import MapContainer from 'MapContainer';

import Alert from 'Alert';

class IndexPage extends Component{

    componentWillMount() {
        console.log('cwm indexpage', this.props.location.query);
        this.props.myActions.getSpots('london', 1, 1)
    }


    render() {      
        return (            
            <div className='index-page row'>
                <Alert />               
                <div className='col-sm-5 no-padding'>
                    <MapContainer />
                </div>
                <div className='col-sm-7 no-padding' id='right'>
                    <SpotsList/>
                </div>
            </div>
        );  
    }
}

export default connect(
 state => ({}), 
 dispatch => ({
  myActions : bindActionCreators(myActions,dispatch) 
 }) 
)(IndexPage);

为什么函数从未调用过redux thunk

2 个答案: