组件 props.dispatch 不起作用。反应还原答案

【问题标题】：Component props.dispatch doesnt work. React redux组件 props.dispatch 不起作用。反应还原
【发布时间】：2016-12-20 10:34:40
【问题描述】：

我需要帮助。在我的颜色控制中，我试图做一个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>
        )
    }
}

谁能帮助我了解发生了什么问题？

【问题讨论】：

ColorControl 连接到 redux 了吗？
您似乎没有将connect 用于ColorControl。如果您使用装饰器语法，那么您还需要在 ColorControl 组件定义上方添加 @connect。当然，除非它是连接组件的子组件。

标签： javascript reactjs ecmascript-6 redux react-jsx

【解决方案1】：

你需要将ColorControl连接到Redux，否则它不会得到一个dispatch prop。

@connect()
class ColorControl extends React.Component {

【讨论】：

【解决方案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。万一您需要它，但这会使代码不太清晰并导致维护问题。

【讨论】：

【解决方案3】：

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

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

【讨论】：