Question

当我从搜索栏发出我的http请求时，我会在我的控制台中收到此消息：

收到的动作print是reducer里面的console.log。在axios http请求之后，请求打印是我的操作中的console.log。请注意，我希望在我的reducer中我收到对象而不是promise。我会把一些代码告诉你们，你们知道情况并且可以帮助我。

的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 /动作/ 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 /容器/ 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 /减速器/ reducer_weather.js

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

的src /减速器/ index.js

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

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

export default rootReducer;

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

Answer 1

你应该在get上使用。像

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

reducer行动正在回归待定承诺

1 个答案: