Question

我正在开发第一个React-Redux应用程序。我有以下容器：

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

Answer 1

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

将mapDispatchToProps功能更改为：

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

它应该有用。

您实际上应该更进一步，并使所有操作都遵循标准化模板。很多React开发人员都关注的是flux-standard-action。

React-Redux reducer方法在执行时出错

1 个答案: