Component props.dispatch doesnt work. React redux

Question

I need help. In my colorcontrol I am trying to do a this.props.dispatch(triggerFBEvent(fbID, method, params)) with no luck. What works though is if I were to just do just triggerFBEvent(fbID, method, params) . I am getting the error: index.bundle.js:61968 Uncaught TypeError: this.props.dispatch is not a function

What I am trying to accomplish is to be able to send in new props with the line above, and then on

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

Call a custom service to update state with appropriate colors. But this.props.dispatch is not a function there either.

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

Can anyone help me understand whats going wrong?

Answer 1

You need to connect ColorControl to Redux, otherwise it doesn't get a dispatch prop.

@connect()
class ColorControl extends React.Component {

Answer 2

Here is the codebase to use your actions without problems.

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

I hope you get the idea. If you use this patterns, you won't have problems.

As you can use your derived state as this.props.derivedState, which you define in the connect, you can also use your actions you defined on the connect.

Besides you can use this.props.dispatch if you connected your component. In case you need it as in your case, but this makes the code less clear and leads to maintainance problems.

Answer 3

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

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