2017-10-15 32 views
1

每次我试图派遣我的动作时间,我得到这个错误:错误:操作必须是普通对象。使用自定义中间件进行异步操作。在反应本土

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

我已经安装redux-thunk和无异步行为,它的工作。

存储配置:

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); 

操作:

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)); 
    } 
}; 

编辑:如果我添加logger到中间件过,该错误信息是这样的:

TypeError: Cannot read property 'type' of undefined

感谢您的帮助!

回答

1

动作是返回一个包含动作数据的对象的函数,该数据是一个具有type属性的对象。

你调度动作是这样的:

dispatch(getCities) 

你应该派遣行动是这样的:

dispatch(getCities()) 
+0

哦....尼斯... :)谢谢!它帮助!但我得到了一个不同的消息:'TypeError:(0,_cities.getCities)不是一个函数':(它看起来像我试图称它为'this.props.getCities()'时它的工作原理是这样的: '函数getCities(){dispatch((0,_cities.getCities)());}' –

+0

没关系,那是一个错字.....再次感谢! –

相关问题