コンポーネントprops.dispatchが機能しません。反復還元

Question

私は助けが必要です。私のcolorcontrolでは、私は運がないthis.props.dispatch(triggerFBEvent(fbID, method, params))をやろうとしています。 どうすればいいですか？私はちょうどちょうどtriggerFBEvent(fbID, method, params)をしなければならないかどうかです。 index.bundle.js:61968 Uncaught TypeError: this.props.dispatch is not a function

私が達成しようとしていますどのような上の行に新しい小道具に送信できるようにすることであり、その後、

componentWillMount() { this.props.dispatch(fetchFBEvent(this.props.fbID, "getColor")) }

に更新するために、カスタムサービスを呼び出す：私はエラーを取得するとしています状態を適切な色で表示します。しかし、this.props.dispatchはそこの関数ではありません。

import React from 'react' 
import { connect } from 'react-redux' 
import {triggerFBEvent, triggerFBClearEvent, fetchFBEvent} from '../actions/functionblocksActions' 
` 
import { CustomPicker, HuePicker, SaturationPicker, SliderPicker, CustomPointer } from 'react-color'; 


@connect((store) => { 
    return { 
    fb: store.functionblocks.functionblock 
    } 
}) 

export default class Functionblock extends React.Component { 

    constructor(props) { 
    super(props); 
     this.state = { 

     }; 
    this._getType = this._getType.bind(this) 

    } 
     _getType (wanted) { 
     const { fbID, fbName, func } = this.props; 
     let type; 
     let types = { 
      'com.xxxx.xx.service.dal.functions.Alarm': function() { 
      type = <Alarm fbID={fbID} fbName={fbName}/>; 
      }, 
      'com.xxxx.xxx.service.dal.functions.BooleanControl': function() { 
      type = <BooleanControl fbID={fbID} fbName={fbName}/>; 
      }, 
      'com.xxx.xxxx.service.dal.functions.BooleanSensor': function() { 
      type = <BooleanSensor fbID={fbID} fbName={fbName} />; 
      }, 
      'com.xxxx.xxx.service.dal.functions.ColorControl': function() { 
      type = <ColorControl func={func} fbID={fbID} fbName={fbName} />; 
      } 

      'default': function() { 
      type = <WakeUp fbID={fbID} fbName={fbName} />; 
      } 
     }; 

     // invoke it 
     (types[wanted] || types['default'])(); 

     // return a String with chosen type 
     return type; 
     } 

    render() { 
    const { fbID, fbName, func } = this.props; 
    const type = this._getType(func.serviceProperties["clazz"]); 


     return( 
     <div> 
     {type} 
     </div> 
    ) 
    } 
} 


// Classes for the different functions. 
class ColorControl extends React.Component { 
    componentWillMount() { 
     this.props.dispatch(fetchFBEvent(this.props.fbID, "getColor")) 
    } 
    constructor(props) { 
     super(props); 
     this.state = { 
      color: { 
      h: 150.3197479248047, 
      s: 0.5, 
      l: 0.5 
      } 
     } 
     this.onChangeComplete = this.onChangeComplete.bind(this); 
    } 
    componentWillReceiveProps(nextProps) { 
     alert("YEP") 
    // let home = this._getHome(nextProps.areas, nextProps.statics); 
    // if(home!=null){ 
    // this.setState({ 
    //  inputHome: home.name, 
    // }) 
    // } 
    } 
    onChangeComplete(color, event) { 

     let hsl = color.hsl; 

     let hue = color.hsl.h/360; 
     let saturation = color.hsl.s; 
     let lightness = color.hsl.l; 

     this.setState({ color: hsl }) 

     // Update props 
     let fbID = this.props.fbID; 
     let method = "setColor"; 
     let params = {"hue": hue, "sat": saturation, "light": lightness}; 
     this.props.dispatch(triggerFBEvent(fbID, method, params)) 

     } 
    _defineFunction(){ 

    } 

    render() { 
     return (<div> 
      <SliderPicker {...this.props} 
      pointer={ CustomPointer } 
      color={this.state.color} 
      onChangeComplete={ this.onChangeComplete } 
      direction={ 'horizontal' || 'vertical' }/> 

     </div> 
     ) 
    } 
} 

どうすれば間違っているのか理解できますか？

Answer 1

ColorControlをReduxに接続する必要があります。それ以外の場合はディスパッチプロップを取得しません。

@connect() 
class ColorControl extends React.Component { 

Answer 2

あなたの行動を問題なく使用するためのコードベースは次のとおりです。

import * as actions from './YourActionsPath' 
import { bindActionCreators } from 'redux' 

@connect( 
    state => ({ 
    yourDerivedState : state.somePath 
    }), 
    dispatch => ({ 
    actions : bindActionCreators(actions, dispatch) 
    }) 
) 

export default class YourClass extends Component { 
    someMethod(){ 
    this.props.actions.yourAction() // call it with no problems 
    } 
    render(){ 
    return (
     // your html 
    ) 
    } 
} 

私はあなたがアイデアを得ることを願っています。このパターンを使用すると、問題は発生しません。

派生状態をconnectで定義したthis.props.derivedStateとして使用できるので、接続で定義したアクションを使用することもできます。

さらに、コンポーネントを接続している場合はthis.props.dispatchを使用できます。あなたの場合と同じように必要な場合には、これによりコードが明確でなくなり、メンテナンスの問題が発生します。

Answer 3

import { createStore } from 'redux' 
let store = createStore(//define reducer,preload state and enhancer) 

//call action 
store.dispatch(triggerFBEvent(fbID, method, params))