Fehler: Aktionen müssen einfache Objekte sein. Verwenden Sie benutzerdefinierte Middleware für asynchrone Aktionen. in React india

Question

ich diesen Fehler bin immer jedes Mal, wenn ich versuche, meine Aktion zu Versandfertig:

Error: Actions must be plain objects. Use custom middleware for async actions.

I redux-thunk und ohne Asynchron-Aktionen installiert haben, es funktioniert.

Shop config:

import { applyMiddleware, createStore } from 'redux'; 
import thunk from 'redux-thunk'; 
import { createLogger } from 'redux-logger'; 
import { composeWithDevTools } from 'redux-devtools-extension'; 

import reducers from '../reducers/index'; 

const logger = createLogger(); 

export default createStore(reducers, composeWithDevTools(applyMiddleware(thunk))); 

UI:

... 
import { connect } from 'react-redux'; 
import { getCities } from '../../actions/cities'; 
... 
componentDidMount = async() => { 
    try { 
     const cities = await this.props.getCities(); 
     console.log(cities); 
    } catch (error) { 
     console.log(`errorhome: ${error}`); 
    } 
    SplashScreen.hide(); 
    } 
... 

const mapDispatchToProps = dispatch => ({ 
    changeNetworkStatus:() => dispatch(changeNetworkStatus), 
    getCities:() => dispatch(getCities), 
}); 

export default connect(mapStateToProps, mapDispatchToProps)(Home); 

Aktion:

import database from '../config/utils'; 

export const GET_CITIES_START = 'GET_CITIES_START'; 
export const GET_CITIES_FINISHED = 'GET_CITIES_FINISHED'; 
export const GET_CITIES_ERROR = 'GET_CITIES_ERROR'; 

const getCititesStart =() => ({ type: GET_CITIES_START }); 
const getCititesFinished = cities => ({ type: GET_CITIES_FINISHED, cities }); 
const getCititesError = error => ({ type: GET_CITIES_ERROR, error }); 

export const getCitites =() => async (dispatch) => { 
    dispatch(getCititesStart()); 
    try { 
    const cities = []; 
    const snap = await database.ref('cities').once('value'); 
    console.log('snap: ', snap); 
    snap.forEach((element) => { 
     const city = { 
     city: element.key, 
     coordinate: element.val().coordinate, 
     }; 
     cities.push(city); 
    }); 
    dispatch(getCititesFinished(cities)); 
    } catch (error) { 
    dispatch(getCititesError(error)); 
    } 
}; 

EDIT: Wenn ich logger zu Middle zu addieren, ist die Fehlermeldung folgt:

TypeError: Cannot read property 'type' of undefined

Danke für Ihre Hilfe!

Answer 1

Aktionen sind Funktionen, die ein Objekt mit Aktionsdaten zurückgeben, dh Daten sind ein Objekt mit einer type Eigenschaft.

Sie Dispatching Aktion wie folgt aus:

dispatch(getCities) 

Sie sollten Aktion wie folgt versenden:

dispatch(getCities())