React-Redux reducer方法執行時出錯

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。