react-redux - 无法从 redux promise 访问 action.payLoad.data

Question

我正在使用 redux promise 开发天气应用程序，但无法检索 action.payLoad.data .
actions/index.js

import axios from 'axios';

const API_KEY = 'xxxxxxxxx';
const ROOT_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

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

  //console.log("request:", request);

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

reducers/reducer_weather.js

import  { FETCH_WEATHER } from '../actions/index';

export default function(state = [], action) {
  if (action.type === FETCH_WEATHER) {
    console.log('Action.payLoad.data received:', action.payLoad.data);
    console.log('Action received:', action);
  }

  switch (action.type) {
    case FETCH_WEATHER:
      return [ action.payLoad.data, ...state ]; // return new instance of state array
  }
  return state;
}

不管我怎么尝试，action.payload.data 左右的任意组合返回 undefined .我应该如何访问它的值？

Answer 1

编辑:我刚刚看到您说您正在使用 redux-promise 的评论.您应该使用 payload在返回操作中，而不是 payLoad .所以你的函数看起来像这样:

function fetchWeatherPromise (city) {
  const url = `${ROOT_URL}&q=${city},us`;
  return {
      type: 'FETCH_WEATHER',
      payload: new Promise((resolve, reject) => {
          axios.get(url).then(response => resolve(response.data))
      })
    } 
};

还有你的 reducer :

switch (action.type) {
    case 'FETCH_WEATHER_PENDING':
        ...

    case 'FETCH_WEATHER_FULFILLED':
        return [action.payload, ...state];

    default:
        return state;
};

正如 this reddit post 上的这个很好的解释说:

First, some premises (in redux):

• At the end of the redux lifecycle a new Store is returned from a reducer.
• The new store that is returned is the end product of applying Actions to the previous store (using dispatch() !).
• Actions should be SYNCHRONOUS in nature. The way I interpret this is that an action should be a plain object with plain data.

So if we follow this line of thought we can think of actions as the information needed by a reducer to transform the current store into a new store (new state).

I think, up to this point, you get that. So then how do you deal with api/xhr requests which are inherently asynchronous? You don't want to mix async functions with synchronous objects (actions) so then how is it possible to use api calls?

This is where action creators come in.

An Action Creator is simply a function that returns an action. Take note that this does NOT mean that an action creator has to dispatch the action it returns. All it does is return that synchronous, plain object, that we defined as an action.

Knowing this we can speculate, "Hmm, well if it's just a function that returns an object, and it's not necessarily dispatching actions, then can action creators be asynchronous?"

The answer to that question is yes!

Action 创建者所做的是:

它使用 Promise 进行异步 API 调用。

它使用返回的响应创建一个对象(它可能是真实数据，所以你必须解决你的 promise !)。

它使用此对象向商店分派(dispatch)同步操作。

Promise 中间件无需编写 myPromise.then()... (解决您的 promise )每次您想要执行异步操作时。您只需向它提供构建 API 调用所需的信息，而不是一直解决 Promise，中间件将负责其余的工作。

旧:您应该 reshape 您的功能并添加 Middleware处理异步 Action 创建者。另外，axios.get()返回 promise并且您应该在 then 内发送同步操作所以你的 reducer 可以访问获取的数据。这是一个示例，您的 Action 创建者应该如何使用 redux-thunk .

function fetchWeather(city) {
return (dispatch) => {
    const url = `${ROOT_URL}&q=${city},us`;
    return axios.get(url)
        .then(res => res.data)
        .then(data => {
            dispatch({
                type: FETCH_WEATHER,
                payLoad: data
            });
        }) 
     }
}

不要忘记添加applyMiddleware(thunkMiddleware)到您的商店。