减速器看不到一个特定的动作[react-redux]

时间:2017-05-19 12:44:27

标签: javascript reactjs redux react-redux

你是我最后的希望。我现在很沮丧......

我刚刚把所有项目文件都放到了 Github

这是我的问题。 index.js文件中的inside actions文件夹我有两个函数:

fetchLocation()&的 fetchWeather()

当用户输入城市时,我的应用程序正在使用fetchLocation调度操作并从Google Maps Api获取数据。通过ReduxPromise Middleware将Promise更改为object,一切正常。我可以使用此数据在网站上使用Google地图显示该城市。

现在我有lat&amp;因此我将这些数据用于<​​strong> fetchWeather(lat,lng)。 在actions / index.js中,我的 fetchWeather()函数正在运行,因为我在console.log中看到了数据。随着新的lat&amp;它通过天气预报从api.wunderground获取新数据。我可以在console.log和request2中看到这些数据是一个承诺。

这是这个错误/奇怪的行为。 fetchWeather 从不像 fetchLocation 那样行事。我永远不会回来

  return {
    type: FETCH_WEATHER,
    payload: request2
  };
永远不会用开关盒FETCH_WEATHER触发

reducer_weather.js, 我从未见过console.log('INSIDE!')。

我正在使用ReduxDevTootls,我的应用所做的一切都是通过位置缩减器更新状态,所以我可以有多个地图,但reducer_weather总是保持沉默。

你能告诉我为什么吗?

这是来自actions / index.js的代码。我可以在这里找到我的其余代码: 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
  };
}

enter image description here

1 个答案:

答案 0 :(得分:2)

您必须dispatch这一行动。但是你只是将动作生成器称为正常函数。

this行替换为您的回购

fetchWeather(lat, lng);

this.props.fetchWeather(lat, lng);

由于您的actionCreators与dispatchRedux Connect绑定了绑定。

更新: this不适用于Component类的用户定义函数(非默认生命周期方法)。因此,使用es6的胖箭头函数访问您自己函数内的this