React-Redux reducer方法执行时出错
问题描述:
我正在处理第一个React-Redux应用程序。我有以下容器:React-Redux reducer方法执行时出错
import { connect } from 'react-redux'
import Visualization from '../components/visualization'
// http://redux.js.org/docs/basics/UsageWithReact.html#implementing-container-components
const mapStateToProps = (state) => state; // identity transform, for now...
function mapDispatchToProps(dispatch) {
return {
stepForward:() => dispatch('STEP_FORWARD')
};
}
const VisualizationContainer = connect(
mapStateToProps,
mapDispatchToProps
)(Visualization);
export default VisualizationContainer;
而下面接下来的成分:
import React from 'react'
export default class Visualization extends React.Component {
render() {
console.log(this.props.stepForward());
return <div>"HELLO WORLD"</div>;
}
}
然而,当我运行这个应用程序,我出错误搭配:
Uncaught Error: Actions must be plain objects. Use custom middleware for async actions.
问题,标有XXX
,是否存在stepForward
,但执行时会爆炸。这里有什么错误?
答
正如错误所述。行动应该是一个对象,而不是其他类型。你试图将一个字符串作为一个动作分派,这是无效的。相反,您应该使用一个将type
属性设置为该操作的类型字符串的对象。
更改mapDispatchToProps
功能:
function mapDispatchToProps(dispatch) {
return {
stepForward:() => dispatch({
type: 'STEP_FORWARD'
})
};
}
,它应该工作。
实际上,你应该走得更远一点,并让所有操作都遵循标准化模板。很多React开发者遵循的很好的一个是flux-standard-action。
它应该是'dispatch({type:'STEP_FORWARD'})' –
就是这样。谢谢。 –