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做出反应，我在网上跟随了一些例子，但显示我要做的是单击该按钮并增加单击次数，然后在下一个按钮上显示。 this.props.dispatch不是函数，并且未捕获的ReferenceError：未定义CLICK_ADD 我不知道我的连接是否正确，有人帮忙吗？

Answer 1

在您的操作中，您指的是一个常量，在您的reduce中，您指的是一个字符串。通过以下方式初始化操作类型后，它应该可以工作：

const CLICK_ADD = 'CLICK_ADD';
const CLICK_SUB = 'CLICK_SUB';

Answer 2

在您的动作创建者中，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
    }
}

或将其用作字符串，例如

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

Answer 3

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

在此功能中，您应该使用CLICK_ADD作为字符串

REACT REDUX连接失败

3 个答案: