Компонент props.dispatch не работает. React redux

Question

Мне нужна помощь. В моем управлении цветом я пытаюсь сделать 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))