组件 props.dispatch 不工作。反应还原

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，否则它不会获得 dispatch prop。

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

组件 props.dispatch 不工作。反应还原

Component props.dispatch doesnt work. React redux

javascript

ecmascript-6

reactjs

react-jsx

redux