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，但执行时会爆炸。这里有什么错误？

来源

2017-04-24 Aleksey Bilogur

它应该是'dispatch（{type：'STEP_FORWARD'}）' –

就是这样。谢谢。 –

正如错误所述。行动应该是一个对象，而不是其他类型。你试图将一个字符串作为一个动作分派，这是无效的。相反，您应该使用一个将type属性设置为该操作的类型字符串的对象。

更改mapDispatchToProps功能：

function mapDispatchToProps(dispatch) { 
    return { 
     stepForward:() => dispatch({ 
      type: 'STEP_FORWARD' 
     }) 
    }; 
}

，它应该工作。

实际上，你应该走得更远一点，并让所有操作都遵循标准化模板。很多React开发者遵循的很好的一个是flux-standard-action。

来源

2017-04-24 16:58:08

React-Redux reducer方法执行时出错

回答

相关问题