実行時にReact-Reduxレデューサーメソッドのエラーが発生する

Question

私は最初のReact-Reduxアプリケーションを開発中です。でマークされた、

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

問題：私はこのアプリケーションを実行したときに私が出てエラー、しかし

import React from 'react' 

export default class Visualization extends React.Component { 
    render() { 
     console.log(this.props.stepForward()); 
     return <div>"HELLO WORLD"</div>; 
    } 
} 

：

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; 

そして次以降のコンポーネント：私は、次のコンテナを持っていますXXXは、stepForwardが存在しますが、実行時には爆発します。ここのエラーは何ですか？

Answer 1

エラーと同じです。アクションはオブジェクトであり、他のタイプでなければなりません。ストリングをアクションとしてディスパッチしようとしていますが、これは無効です。その代わりに、アクションのタイプ文字列に設定されたtypeプロパティを持つオブジェクトを使用する必要があります。

にご mapDispatchToProps機能を変更

：

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

、それが動作するはずです。

実際にはそれよりもさらに進んで、すべての操作を標準化されたテンプレートに従わせる必要があります。多くのReact開発者が従う素晴らしいものはflux-standard-actionです。