无法从 api 获取数据答案

【问题标题】：Cant get data from api无法从 api 获取数据
【发布时间】：2018-12-09 15:49:33
【问题描述】：

我尝试对 yandex 地图进行地理编码请求。 ymaps.geocode(cityname) 返回一个承诺。

我使用类似的东西

action>index.js

    export function addWay(text) {
return async dispatch => {
    try { 
        const request = await window.ymaps.geocode(text)
        debugger
        dispatch({
            type: 'ADD_WAY',
            payload: request
        })
    } 
    catch (e) {}
}

}

MarkAdd.js

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

class MarkerAdd extends Component {
    constructor(props) {
        super(props);
        this.state = {value:''}

    }
    onInputChange = e => {
        this.setState({ value: e.target.value})
    }
    keyPress = e => {
        if(e.keyCode === 13){
            console.log('enter', e.target.value);
            this.props.addWay(this.state.value);
            this.setState({ value: ''})
        }
    }
    render() {
        return(
            <div className="field">
                <div className="control">
                     <input className="input is-medium" 
                            type="text" 
                            placeholder="Add mark"
                            onKeyDown={this.keyPress}
                            onChange={this.onInputChange}
                            value={this.state.value}
                            >
                     </input>
                 </div>
            </div>
        )
}
}
export default connect(null, {addWay})(MarkerAdd);

但是错误说：动作必须是普通对象。使用自定义中间件进行异步操作。（Redux Thunk 已安装并连接）

怎么了？如果我通过控制台启动它，它实际上会返回承诺。

【问题讨论】：

标签： reactjs redux redux-thunk

【解决方案1】：

如果您安装了redux-thunk，那么您可以通过这种方式从组件调度操作：

import {addWay} from '../actions/index';
...
keyPress = e => {
    if(e.keyCode === 13){
        this.props.dispatch(addWay(this.state.value)); // <-- dispatch action
        this.setState({ value: ''})
    }
}

action itslef 必须返回一个接受dispatch的函数：

export function addWay(text) {
    return async dispatch => {
        try { 
            const request = await window.ymaps.geocode(text)
            dispatch({
                type: 'ADD_WAY',
                payload: request
            })
        } 
        catch (e) {}
    }
}

【讨论】：