구성 요소 props.dispatch가 작동하지 않습니다. 반응 redux

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