CODEWITHSUNDEEP
javascriptecmascript-6reduxreactjs
Joelgullander
Joelgullander

Reputation: 1684

Component props.dispatch doesnt work. React redux

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?

Upvotes: 0

Views: 831

Answers (3)

Codesingh
Codesingh

Reputation: 3384

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

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

Upvotes: -1

FurkanO
FurkanO

Reputation: 7308

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.

Upvotes: 1

Scimonster
Scimonster

Reputation: 33409

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

@connect()
class ColorControl extends React.Component {

Upvotes: 1

Related Questions