Question

我试图对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）

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

Answer 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: ''})
    }
}

动作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) {}
    }
}

无法从api获取数据

1 个答案: