アクションクリエータを呼び出すためにコンテナ内でmapDispatchToPropsを正しく使用/バインドする方法

Question

REACT-REDUXのACTIONSから関数をディスパッチする際に問題があります。 'mapDispatchToProps' で

import axios from 'axios'; 

const API_KEY = 'sdfmbsjfsdf78fsdf78s78fs87f7s2bc5'; 
const ROOT_URL = `http://api.example.org/data/2.5/weather?appid=${API_KEY}`; 

export const FETCH_WEATHER = 'FETCH_WEATHER'; 

export function fetchWeather(city){ 
    const url = `${ROOT_URL}&q=${city},pk`; 
    const request = axios.get(url); 

    console.log("Request in Actions: ", request); // this line is not showing in console because DISPATCHED action is not coming here 

    return { 
    type: FETCH_WEATHER, 
    payload: request 
    }; 
} 

そして、私は '検索バー'（コンテナ/ SearchBar.js）という名前の 'コンテナ' を持っている：

私は以下の 'アクション'（アクション/ index.js）を持っています以下のように記述されています：

import React from 'react'; 
import { connect } from 'react-redux'; 
import fetchWeather from '../actions/index'; 

class SearchBar extends React.Component{ 
    constructor(props){ 
    super(props); 

    this.state = { term: '' }; 
    } 

    onInputChange(event){ 
    this.setState({ term: event.target.value }); 
    } 
onFormSubmit(event){ 
    event.preventDefault(); 

    this.props.fetchWeather(this.state.term); 
    this.setState({ term: ''}); 
    } 

    render(){ 
    return(
     <form onSubmit={ this.onFormSubmit.bind(this) } className="input-group"> 
     <input 
      className="form-control" 
      placeholder="Search your favourite cities to get a five-day forecast" 
      value={ this.state.term } 
      onChange={ this.onInputChange.bind(this) } 
      /> 
     <span className="input-group-btn"> 
      <button type="submit" className="btn btn-secondary">Search</button> 
     </span> 
     </form> 
    ); 
    } 
} 

const mapDispatchToProps = (dispatch) => { 
    return { 
    fetchWeather: (city) => { 
     dispatch({ 
     type: "FETCH_WEATHER" 
     }); 
    } 
    }; 
}; 

export default connect(null, mapDispatchToProps)(SearchBar); 

問題：

は私の問題です：たびに、私は検索でいくつかのテキストを書きますBARとSearchBar.jsで検索ボタンをクリックし、mapDispatchToPropsはすなわち、コンソールconsole.log("Request in Actions: ", request);にwittingないファイルの操作/ index.jsからfetchWeatherアクションを発射されていません。

注： 最新のmapDistpatchToPropsのみを使用する必要がありました。これも働いていますreturn bindActionCreators({fetchWeather}, dispatch);しかし、古いものを探していません。

お願いします。

が this.props.fetchWeather(city)が dispatch(fetchWeather(city))にマッピングされていることを意味

const mapDispatchToProps = (dispatch) => { 
    return { 
    fetchWeather: (city) => dispatch(fetchWeather(city)) 
    }; 
}; 

（あなたのコードはfetchWeather一部をミス：ありがとう

Answer 1

EDITED以下、さらにデバッグは（コメントを参照してください）...

それはする必要がありますあなたのmapDispatchToProps機能のように見えますマッピングの2番目の部分で）。

fetchWeatherのインポートに問題があります。デフォルトではエクスポートされていないためインポートされているためです。私はexport default function fetchWeather(city){...}

：

1. ので、それは デフォルトとしてインポートいないためにあなたのインポートに中括弧を追加します：デフォルトとしてimport { fetchWeather } from '../actions/index';

2. 輸出、それをあなたは2つのうちの1つが行うことができますテストされた変更1とアクションがディスパッチされます。

   そうでなければ、コンストラクタでバインディングを実行するという標準的な方法を試すように、メソッドバインディング（onFormSubmit、onInputChange）を調べることができます。