加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

reactjs – 来自Component的React-Redux Dispatch Action

发布时间:2020-12-15 20:20:57 所属栏目:百科 来源:网络整理
导读:我正试图通过点击按钮发送一个动作. 我创建了我的组件.我将它连接到由提供商传递给组件的商店.但是我收到一个错误: Uncaught TypeError: this.doSearchClick is not a function 我有我的进口: import React,{ Component,PropTypes } from 'react';import {
我正试图通过点击按钮发送一个动作.

我创建了我的组件.我将它连接到由提供商传递给组件的商店.但是我收到一个错误:

Uncaught TypeError: this.doSearchClick is not a function

我有我的进口:

import React,{ Component,PropTypes } from 'react';
import { connect } from 'react-redux';
import action_doSearch from '../../actions/searchActions'

我的组件:

class SearchForm extends React.Component {
  constructor(props,doSearchClick) {
    super(props);
    this.search = this.search.bind(this);
    this.doSearchClick = doSearchClick;
  }

  search() {
    this.doSearchClick('bla bla from search');
  }

  render() {
    return(
      <div>
        <button onClick={this.search}>Search</button>
      </div>
    );
  }
}

不确定是否需要:

SearchForm.propTypes = {
  doSearchClick: PropTypes.func.isRequired
};

最后连接的东西:

const mapStateToProps = (state) => {
  return {
    state
  }
};

const mapDispatchToEvents = (dispatch) => {
  return {
    doSearchClick: (searchCriteria) => {
      dispatch(action_doSearch(searchCriteria));
    }
  };
};
const SearchFormConnected = connect(
  mapStateToProps,mapDispatchToEvents
)(SearchForm);

在顶层,我通过提供商通过商店:

import { Provider } from 'react-redux'

const finalCreateStore = compose(
   applyMiddleware(
      middleware,thunk
   ),DevTools.instrument()
)(createStore);

const store = finalCreateStore(reducer);

ReactDOM.render(
  <Provider store={store}>
    ....

我也尝试通过上下文访问商店(没有工作,可能会被弃用)以及使用@connect属性(给我一个类似的错误)来实现这一点.

解决方法

doSearchClick将在props对象中传递.所以你需要输入props.doSearchClick来访问它.

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读