なぜ機能はレデックスサンクと呼ばれていません

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

あなたの接続は間違った方法で使用されていると思います。それは何もしません。代わりに、私がしたようにあなたの行動をバインドし、あなたのサンクの行動を使用することができます。

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