来自组件的 React-Redux 调度操作

Question

我正在尝试通过单击按钮发送操作。

我已经创建了我的组件。我将它连接到由供应商传递给组件的商店。但是我得到一个错误：

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

最后 connect 内容：

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

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

在顶层，我通过 Provider 向下传递商店：

import { Provider } from 'react-redux'

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

const store = finalCreateStore(reducer);

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

我还尝试通过上下文访问商店（没有用，可能已被弃用）并使用 @connect 属性（给了我一个类似的错误）来实现这一点。

Answer 1

doSearchClick 会传入 props 对象。所以你需要输入 props.doSearchClick 来访问它。

Answer 2

这个：

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

意味着您的 SearchForm 组件期望从其父组件获得一个名为 doSearchClick 的函数作为 props。

如果父亲传递了这个道具，child 应该通过

访问它

props.doSearchClick

来自组件的 React-Redux 调度操作

React-Redux Dispatch Action from Component

reactjs

redux

react-redux