React Redux connect API 不注入 dispatch 属性

Question

我使用react-redux 连接React 和Redux store，并使用"connect" API 注入"dispatch" 属性到组件。但是组件没有收到 "dispatch" 属性。这是演示我遇到的问题的代码：

"use strict"

var React = require('react');
var ReactDOM = require('react-dom');
var Redux = require('redux');
var ReactRedux = require('react-redux');
var Provider = ReactRedux.Provider;

function menuManager(state = {count: 0}, action) {
  switch (action.type) {
    case 'ADD':
      return state + 1;
    case 'REMOVE':
      return state - 1;
    default:
      return state;
  }
}

let store = Redux.createStore(menuManager);

let TestLab = React.createClass({
  onRemove: function(itemRemove) {
    // this.props.dispatch undefined.
    this.props.dispatch({type: 'REMOVE'});
  },
  onAdd: function() {
    const { dispatch } = this.props
    // this.props.dispatch undefined.
    this.props.dispatch({type: 'ADD'});
  },
  getInitialState: function() {
    return { count: 0 };
  },
  render: function() {
    return (
        <div>
          <p>Total count: { this.state.count }</p>
          <button type="button" onClick={this.onAdd}>Add Item</button>
        </div>
    );
  }
});

function select(state) {
  return state;
}

ReactRedux.connect(select)(TestLab);

var target = document.createElement('div');
document.body.appendChild(target);
ReactDOM.render(<Provider store={store}><TestLab /></Provider>, target);

当我尝试调用 "this.props.dispatch" 时，出现 "this.props.dispatch" 未定义的错误。

Answer 1

您没有使用连接组件，connect() returns a new component。

TestLab = ReactRedux.connect(select)(TestLab);
ReactDOM.render(<Provider store={store}><TestLab /></Provider>, target);

您还会运行遇到其他一些问题，即您使用的是 this.state.count 而不是 this.props.count 并且您的 reducer 函数会尝试在对象上递增或递减不是里面的整数。

React Redux connect API 不注入 dispatch 属性

React Redux connect API does not inject dispatch property

reactjs

redux