Не могу получить данные из API - PullRequest
Новая
       4

Не могу получить данные из API

0 голосов
/ 01 июля 2018

Я пытаюсь сделать запрос геокодирования к картам яндекса. ymaps.geocode (название города), возвращающее обещание.

Я использую что-то подобное

действие> 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 установлен и подключен)

Что не так? Если я запускаю его через консоль, он на самом деле возвращает обещание.

1 Ответ

0 голосов
/ 01 июля 2018

Если у вас установлено 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) {}
    }
}
...