3
我不明白为什么动作创建者被调用,但卡在中间的某个地方。 我的组件为什么功能从来没有叫REDX thunk
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行动的创建者一直呼吁,但没有请求服务器。 我的方法有什么问题?
既然你调用'getSpots'函数打印输出,但它返回了另一个你没有调用的函数。 – Vikramaditya