javascript - REACT REDUX 连接失败

Question

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 使用react，我在网上关注了一些例子，但它显示我想要做的是单击按钮并增加单击次数并显示在下一个按钮上。 this.props.dispatch 不是一个函数并且未捕获的 ReferenceError:未定义 CLICK_ADD我不知道我的连接是否正确，有人帮忙吗？谢谢

Answer 1

在您的 Action creators 中，CLICK_ADD 和 CLICK_SUB 是 undefined variable ，您可以像这样定义它

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

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

或者把它当作字符串来使用

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')
    );