Reducer can't see one particular action [react-redux]

Question

You are my last hope. I'm so frustrated right now...

I've just put all my project files to Github .

Here is my problem. Inside actions folder in index.js file I have two functions:

fetchLocation() & fetchWeather()

When user inputs city my app is dispatching action with fetchLocation and is getting data from Google Maps Api. Promise is changed to object by ReduxPromise Middleware and everything works fine. I can use this data to show that city on website using Google maps.

Now I have lat & lng so I use that data with fetchWeather(lat, lng) . Inside actions/index.js my fetchWeather() function is working, because I see data in console.log. With new lat & lng it fetches new data from api.wunderground with weather forecast. And I can see this data inside console.log and request2 is a promise.

And here is this bug/strange behavior. fetchWeather never behaves like fetchLocation did. I never returns

  return {
    type: FETCH_WEATHER,
    payload: request2
  };

reducer_weather.js is never triggered with switch case FETCH_WEATHER, and I've never seen console.log('INSIDE!').

I'm using ReduxDevTootls and everything that my app does is updates states by location reducer so I can have multiple maps, but reducer_weather is always silent.

Could you please tell me why?

Here is my code from actions/index.js. Rest of my code you can find here: Github .

import axios from 'axios';
export const FETCH_LOCATION = 'FETCH_LOCATION';
export const FETCH_WEATHER = 'FETCH_WEATHER';
const API_KEY_GOOGLE = 'AIzaSyDNMmI2f7qIcBnKgV1dYXmi995BY_8zoJM';
const API_KEY_WUNDERGROUND = 'cd8c7ea98a37877f';

export function fetchLocation(city) {
  const url = `https://maps.googleapis.com/maps/api/geocode/json?address=${city}&key=${API_KEY_GOOGLE}`
  const request = axios.get(url);
  console.log('request1: ', request);
  return {
    type: FETCH_LOCATION,
    payload: request
  };
}

export function fetchWeather(lat, lng) {
  console.log(lat, lng);

  const url = `https://api.wunderground.com/api/${API_KEY_WUNDERGROUND}/forecast10day/q/${lat},${lng}.json`;

  console.log(url);

  const request2 = axios.get(url);

  console.log('request2: ', request2);

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

Answer 1

You must dispatch the action. But you are simply calling the action generator as normal function.

Replace this line from your Repo

fetchWeather(lat, lng);

with

this.props.fetchWeather(lat, lng);

Since your actionCreators are binded with dispatch through Redux Connect .

UPDATE: this is not available for user defined functions(not default life cycle methods) of Component class. So use fat arrow functions of es6 to access this inside your own functions.