Cant get data from api - reactjs

Question

I trying to make request geocoding to yandex maps.
ymaps.geocode(cityname) returning a promise.
I using somthing like that
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);
But error say: Actions must be plain objects. Use custom middleware for async actions.
(Redux Thunk is installed and connected)
Whats wrong?
If i launch it via console it actually return promise.

Answer 1

If you have redux-thunk installed then you can dispatch actions from component this way:
import {addWay} from '../actions/index';
...
keyPress = e => {
if(e.keyCode === 13){
this.props.dispatch(addWay(this.state.value)); // <-- dispatch action
this.setState({ value: ''})
}
}
The action itslef must return a function that accepts dispatch:
export function addWay(text) {
return async dispatch => {
try {
const request = await window.ymaps.geocode(text)
dispatch({
type: 'ADD_WAY',
payload: request
})
}
catch (e) {}
}
}