错误:操作必须是普通对象。使用自定义中间件进行异步操作。在反应本土
问题描述:
每次我试图派遣我的动作时间,我得到这个错误:错误:操作必须是普通对象。使用自定义中间件进行异步操作。在反应本土
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
感谢您的帮助!
答
动作是返回一个包含动作数据的对象的函数,该数据是一个具有type
属性的对象。
你调度动作是这样的:
dispatch(getCities)
你应该派遣行动是这样的:
dispatch(getCities())
哦....尼斯... :)谢谢!它帮助!但我得到了一个不同的消息:'TypeError:(0,_cities.getCities)不是一个函数':(它看起来像我试图称它为'this.props.getCities()'时它的工作原理是这样的: '函数getCities(){dispatch((0,_cities.getCities)());}' –
没关系,那是一个错字.....再次感谢! –