组件props.dispatch不起作用。 React REDX

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 
    ) 
    } 
} 

我希望你明白了。如果你使用这种模式，你不会有问题。

正如你可以使用你的派生状态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))