javascript - reducer 看不到一项特定操作 [react-redux]

Question

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

我刚刚将所有项目文件放入 Github .

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

fetchLocation() 和 fetchWeather()

当用户输入城市时，我的应用程序正在使用 fetchLocation 调度操作，并从 Google Maps Api 获取数据。 ReduxPromise 中间件将 Promise 更改为对象，一切正常。我可以使用这些数据通过谷歌地图在网站上显示该城市。

现在我有了纬度和经度，因此我将这些数据与 fetchWeather(lat, lng) 一起使用。 在 actions/index.js 中，我的 fetchWeather() 函数正在运行，因为我在 console.log 中看到数据。通过新的纬度和经度，它可以从 api.wunderground 获取带有天气预报的新数据。我可以在 console.log 中看到这些数据，而 request2 是一个 promise 。

这是这个错误/奇怪的行为。 fetchWeather 的行为绝不会像 fetchLocation 那样。我再也没有回来

  return {
    type: FETCH_WEATHER,
    payload: request2
  };

reducer_weather.js 永远不会被 switch case FETCH_WEATHER 触发， 而且我从未见过 console.log('INSIDE!')。

我正在使用 ReduxDevTootls，我的应用程序所做的一切都是通过位置缩减程序更新状态，这样我就可以拥有多个 map ，但缩减程序_天气始终保持沉默。

你能告诉我为什么吗？

这是我的 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
  };
}

Answer 1

您必须调度该操作。但您只是将 Action 生成器作为普通函数调用。

替换this来自您的存储库的行

fetchWeather(lat, lng);

与

this.props.fetchWeather(lat, lng);

由于您的 actionCreators 通过 Redux Connect 与 dispatch 绑定(bind).

更新: this 不适用于 Component 类的用户定义函数(不是默认生命周期方法)。因此，请使用 es6 的粗箭头函数在您自己的函数中访问 this。