javascript - REACT REDUX连接失败

var initialState = {
                value:0
                }


        //action creators
        function clickAdd() {
          return {
              type: CLICK_ADD
          }
        }

        function clickSub() {
          return {
              type: CLICK_SUB
          }
        }

        //reducre
        function reducre(state, action) {
          if (typeof state === 'undefined') {
            return 0
          }
          var value;
          switch(action.type) {
              case 'CLICK_ADD': {
                  value = state + 1;
                  return value

              }
              case 'CLICK_SUB': {
                  value = state - 1;
                  return value

              }
              default :{
                  return state
              }
          }
        }

        var store = Redux.createStore(reducre,initialState)
        var ButtonGroup = React.createClass({


             clickAdd(event) {
                    this.props.dispatch(clickAdd());
                }  ,

          render() {

              const { value } = this.props;


                return (
                  <ButtonToolbar style={{width: 17+ 'em'}} >
                  <Button  id="search"  }>{value}</Button>
                  <Button  onClick={this.clickAdd} }>ADD</Button>
                  </ButtonToolbar>
                );
              }
        });

        function select(state) {
            return {
                value: state.value
            }
        }

        connect(select)(ButtonGroup);


        ReactDOM.render(
          <Provider store={store}>
            <ButtonGroup/>
          </Provider>,
        document.getElementById('button_container')
        );

我在没有ES6或Webpack的情况下对redux做出反应，
我在网上跟随了一些例子，但显示
我想要做的是单击按钮，并增加单击次数，然后在下一个按钮上显示。 this.props.dispatch不是函数，并且
未捕获的ReferenceError：未定义CLICK_ADD
我不知道我的连接是否正确，有人帮忙吗？谢谢

最佳答案

在您的动作创建者中，CLICK_ADD和CLICK_SUB是未定义的变量，您可以像定义

var CLICK_ADD = 'CLICK_ADD';
var CLICK_SUB = 'CLICK_SUB';

function clickAdd() {
    return {
        type: CLICK_ADD
    }
}
function clickSub() {
    return {
        type: CLICK_SUB
    }
}

或将其用作String之类的

function clickAdd() {
    return {
        type: 'CLICK_ADD'
    }
}

function clickSub() {
    return {
        type: 'CLICK_SUB'
    }
}

另外，您还需要使用connected按钮组件

   const NewButtonGroup = connect(select)(ButtonGroup);


    ReactDOM.render(
      <Provider store={store}>
        <NewButtonGroup/>
      </Provider>,
    document.getElementById('button_container')
    );

关于javascript - REACT REDUX连接失败，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51760186/