reducer 操作只是返回待处理的承诺

Question

当我从搜索栏发出 http 请求时，我在控制台中收到了这个：

look the image to see my console output

收到的操作打印是减速器内的控制台.log。请求打印是 axios http 请求后 my action 中的 console.log。请注意，我希望在我的减速器中收到对象而不是一个未决的承诺。我会放一些代码给你们知道情况，可以帮助我。

src/index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';
import { createStore, applyMiddleware } from 'redux';
import ReduxPromise from 'redux-promise';
import promiseMiddleware from 'redux-promise-middleware'
import thunkMiddleware from 'redux-thunk';
import { createLogger } from 'redux-logger';

import App from './components/app';
import reducers from './reducers';

// const createStoreWithMiddleware = applyMiddleware(ReduxPromise, createLogger)(createStore);
const loggerMiddleware = createLogger()

const store = createStore(
  reducers,
  applyMiddleware(
    thunkMiddleware, // lets us dispatch() functions
    loggerMiddleware // neat middleware that logs actions
  )
)

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>
  , document.querySelector('.container'));

src/actions/index.js

import axios from 'axios';

const API_KEY = 'MY API KEY'
const API_URL = `http://api.openweathermap.org/data/2.5/forecast?appid=${API_KEY}`;

export const FETCH_WEATHER = 'FETCH_WEATHER';

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

  console.log('Request:', request);

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

src/containers/search_bar.js

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

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

    this.state = { term: '' };
    this.onInputChange = this.onInputChange.bind(this);
    this.onFormSubmit = this.onFormSubmit.bind(this);
  }

  onInputChange(term) {
    this.setState({ term: term });
  }

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

  }

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

function mapDispatchToProps(dispatch) {
  return bindActionCreators({ fetchWeather }, dispatch);
}

export default connect(null, mapDispatchToProps)(SearchBar)

src/reducers/reducer_weather.js

export default function(state = null, action) {
  console.log('Action received', action);
  return state;
}

src/reducers/index.js

import { combineReducers } from 'redux';
import WeatherReducer from './reducer_weather'

const rootReducer = combineReducers({
  weather: WeatherReducer
});

export default rootReducer;

我想要的是在 reducer_weather 中我可能会得到响应对象，而不是待处理的承诺。

Answer 1

你应该在 get 上使用 then。喜欢

axios.get(url).then((data) => {console.log(data)})